文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >水平和垂直地居中HTML对象

问水平和垂直地居中HTML对象
EN

Stack Overflow用户
提问于 2014-02-12 14:39:57
回答 3查看 505关注 0票数 0

我知道这些问题被问了很多次，但在我的生活中，我想不出如何使我的物体垂直中心。任何帮助都将不胜感激！

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

代码语言：javascript
复制
<!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

代码语言：javascript
复制
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;
    }
}
css
vertical-alignment
html
EN

回答 3

Stack Overflow用户

发布于 2014-02-12 14:44:41

很简单..。

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

瞧。

票数 0
EN

Stack Overflow用户

发布于 2014-02-12 14:53:27

与Alien类似，但我修改了您的.main和.demo-3 .bokeh类(如下所示)：

代码语言：javascript
复制
.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在这里

票数 0
EN

Stack Overflow用户

发布于 2014-02-12 14:58:38

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

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

代码语言：javascript
复制
.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;
}

Fiddle: http://jsfiddle.net/ositoozy/A6QRU/

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/21731019

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档