中心HTML对象水平和垂直

时间：2014-02-12 14:39:57

标签： css html5 css3 vertical-alignment

我知道这些问题会被问到很多次，但我不能为我的生活弄清楚如何让我的物体垂直居中。任何帮助将不胜感激！

演示 - 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;
    }
}

4 个答案:

答案 0 :(得分：6)

您是否发明了 <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 */
}

答案 1 :(得分：0)

真的很简单..

  1. 获取窗口高度
  2. 获取对象高度
  3. 将窗口高度除以2，将对象高度除以2.
  4. 从object/2中减去window/2。这是对象的上边距。

    5. 瞧。

答案 2 :(得分：0)

与Alien先生类似，但我修改了您的.main和您的.demo-3 .bokeh课程（下方）：

.main {
    width: 90%;
    margin: auto;
}

.demo-3 .bokeh {
    font-size: 100px;
    width: .5em;
    height: .5em;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -25px;
    margin-left: -25px;
    border-radius: 50%;
    border: .01em solid rgba(150,150,150,0.3);
    list-style: none;
}

<强> JSFiddle here

答案 3 :(得分：0)

即使有一天您决定更改加载程序大小，此解决方案仍然有效。

基本上，改变父母的位置是绝对的，我为孩子做了一些魔术 但你可以使用这种技术集中任何东西。检查结果的链接

.main {
width: 100%;
height: 100%;
margin: auto;
position: absolute;
}

.demo-3 .bokeh {

font-size: 100px;
position: absolute;

width: .5em;
height: .5em;

border-radius: 50%;
border: .01em solid rgba(150,150,150,0.3);
list-style: none;

margin: auto;
left: 0;
right: 0;
bottom: 0;
top: 0;
}

小提琴： http://jsfiddle.net/ositoozy/A6QRU/

相关问题
最新问题