个人中心
gpt4 book ai didi

html - 水平和垂直居中 HTML 对象

转载 作者：太空宇宙 更新时间：2023-11-03 20:15:36 25 4
gpt4 key购买 nike

我知道这些问题被问过很多次，但我一辈子都想不出如何让我的对象垂直居中。任何帮助将不胜感激!

演示 - http://jsfiddle.net/3aVjV/1/ 

<!doctype html>
<html lang="en" class="demo-3 demo-dark js boxshadow pointerevents placeholder">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <body>
            <div class="container">
                <service class="main">
                    <ul class="bokeh">
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </service>
            </div>
        </body>

CSS

html {
    height: 100%;
    margin:0;
    padding:0;
}
*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
body {
    -webkit-font-smoothing: antialiased;
    overflow: hidden !important;
    margin:0;
    padding:0;
}
.container {
    width: 100%;
    position: fixed;
    margin: auto;
    height: 100%;
}
.main {
    width: 90%;
    margin: auto;
    position: relative;
}
/* DEMO 3 */
 .demo-3 body {
    background-color: #fff;
    margin:0;
    padding:0;
    overflow: hidden !important;
}
.demo-3 body:after {
    content:"";
    z-index: -1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.demo-3 .bokeh {
    font-size: 100px;
    width: .5em;
    height: .5em;
    position: relative;
    margin: auto;
    border-radius: 50%;
    border: .01em solid rgba(150, 150, 150, 0.3);
    list-style: none;
}
.demo-3 .bokeh li {
    position: absolute;
    width: .1em;
    height: .1em;
    border-radius: 50%;
}
.demo-3 .bokeh li:nth-child(1) {
    left: 50%;
    top: 0;
    margin: 0 0 0 -.05em;
    background: #00C176;
    -webkit-transform-origin: 50% 250%;
    -moz-transform-origin: 50% 250%;
    -ms-transform-origin: 50% 250%;
    -o-transform-origin: 50% 250%;
    transform-origin: 50% 250%;
    -webkit-animation: rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate;
    -moz-animation: rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate;
    -ms-animation: rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate;
    -o-animation: rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate;
    animation: rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate;
}
.demo-3 .bokeh li:nth-child(2) {
    top: 50%;
    right: 0;
    margin: -.05em 0 0 0;
    background: #FF003C;
    -webkit-transform-origin: -150% 50%;
    -moz-transform-origin: -150% 50%;
    -ms-transform-origin: -150% 50%;
    -o-transform-origin: -150% 50%;
    transform-origin: -150% 50%;
    -webkit-animation: rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate;
    -moz-animation: rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate;
    -ms-animation: rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate;
    -o-animation: rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate;
    animation: rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate;
}
.demo-3 .bokeh li:nth-child(3) {
    left: 50%;
    bottom: 0;
    margin: 0 0 0 -.05em;
    background: #FABE28;
    -webkit-transform-origin: 50% -150%;
    -moz-transform-origin: 50% -150%;
    -ms-transform-origin: 50% -150%;
    -o-transform-origin: 50% -150%;
    transform-origin: 50% -150%;
    -webkit-animation: rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate;
    -moz-animation: rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate;
    -ms-animation: rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate;
    -o-animation: rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate;
    animation: rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate;
}
.demo-3 .bokeh li:nth-child(4) {
    top: 50%;
    left 0;
    margin: -.05em 0 0 0;
    background: #88C100;
    -webkit-transform-origin: 250% 50%;
    -moz-transform-origin: 250% 50%;
    -ms-transform-origin: 250% 50%;
    -o-transform-origin: 250% 50%;
    transform-origin: 250% 50%;
    -webkit-animation: rota 1.72s linear infinite, opa 5.25s ease-in-out infinite alternate;
    -moz-animation: rota 1.72s linear infinite, opa 5.25s ease-in-out infinite alternate;
    -ms-animation: rota 1.72s linear infinite, opa 5.25s ease-in-out infinite alternate;
    -o-animation: rota 1.72s linear infinite, opa 5.25s ease-in-out infinite alternate;
    animation: rota 1.72s linear infinite, opa 5.25s ease-in-out infinite alternate;
}
@-webkit-keyframes rota {
    to {
        -webkit-transform: rotate(360deg);
    }
}
@-moz-keyframes rota {
    to {
        -moz-transform: rotate(360deg);
    }
}
@-ms-keyframes rota {
    to {
        -ms-transform: rotate(360deg);
    }
}
@-o-keyframes rota {
    to {
        -o-transform: rotate(360deg);
    }
}
@keyframes rota {
    to {
        transform: rotate(360deg);
    }
}
@-webkit-keyframes opa {
    12.0% {
        opacity: 0.80;
    }
    19.5% {
        opacity: 0.88;
    }
    37.2% {
        opacity: 0.64;
    }
    40.5% {
        opacity: 0.52;
    }
    52.7% {
        opacity: 0.69;
    }
    60.2% {
        opacity: 0.60;
    }
    66.6% {
        opacity: 0.52;
    }
    70.0% {
        opacity: 0.63;
    }
    79.9% {
        opacity: 0.60;
    }
    84.2% {
        opacity: 0.75;
    }
    91.0% {
        opacity: 0.87;
    }
}
@-moz-keyframes opa {
    12.0% {
        opacity: 0.80;
    }
    19.5% {
        opacity: 0.88;
    }
    37.2% {
        opacity: 0.64;
    }
    40.5% {
        opacity: 0.52;
    }
    52.7% {
        opacity: 0.69;
    }
    60.2% {
        opacity: 0.60;
    }
    66.6% {
        opacity: 0.52;
    }
    70.0% {
        opacity: 0.63;
    }
    79.9% {
        opacity: 0.60;
    }
    84.2% {
        opacity: 0.75;
    }
    91.0% {
        opacity: 0.87;
    }
}
@-ms-keyframes opa {
    12.0% {
        opacity: 0.80;
    }
    19.5% {
        opacity: 0.88;
    }
    37.2% {
        opacity: 0.64;
    }
    40.5% {
        opacity: 0.52;
    }
    52.7% {
        opacity: 0.69;
    }
    60.2% {
        opacity: 0.60;
    }
    66.6% {
        opacity: 0.52;
    }
    70.0% {
        opacity: 0.63;
    }
    79.9% {
        opacity: 0.60;
    }
    84.2% {
        opacity: 0.75;
    }
    91.0% {
        opacity: 0.87;
    }
}
@-o-keyframes opa {
    12.0% {
        opacity: 0.80;
    }
    19.5% {
        opacity: 0.88;
    }
    37.2% {
        opacity: 0.64;
    }
    40.5% {
        opacity: 0.52;
    }
    52.7% {
        opacity: 0.69;
    }
    60.2% {
        opacity: 0.60;
    }
    66.6% {
        opacity: 0.52;
    }
    70.0% {
        opacity: 0.63;
    }
    79.9% {
        opacity: 0.60;
    }
    84.2% {
        opacity: 0.75;
    }
    91.0% {
        opacity: 0.87;
    }
}
@keyframes opa {
    12.0% {
        opacity: 0.80;
    }
    19.5% {
        opacity: 0.88;
    }
    37.2% {
        opacity: 0.64;
    }
    40.5% {
        opacity: 0.52;
    }
    52.7% {
        opacity: 0.69;
    }
    60.2% {
        opacity: 0.60;
    }
    66.6% {
        opacity: 0.52;
    }
    70.0% {
        opacity: 0.63;
    }
    79.9% {
        opacity: 0.60;
    }
    84.2% {
        opacity: 0.75;
    }
    91.0% {
        opacity: 0.87;
    }
}

最佳答案

是你发明的吗<service> 标签？这是无效的标记，就居中而言，使用 position: absolute;相反。

Demo 

.main {
    border: 1px solid #ddd; /* You can get rid of this, just for test purpose */
    margin: auto;
    position: absolute;
    height: 50px;
    width: 50px;
    top: 50%; /* 50% from top */
    left: 50%; /* 50% from left */
    margin-top: -25px; /* 1/2 of height which will set the top offset */
    margin-left: -25px; /* 1/2 if width which will set the left offset */
}

关于html - 水平和垂直居中 HTML 对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21731019/

25 4 0
文章推荐： c# 在转换时崩溃，显然是 null？
文章推荐： python - 将 Excel 文件从 Python 读取到内存中并将工作表传递给 Pandas
文章推荐： html - 创建一个 css 功能区
文章推荐： python - 使用正则表达式检查字符串是否包含独立的 'c++'
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com