CSS实现DIV水平垂直居中-1

weixin_30670965

于 2016-03-15 13:18:00 发布

阅读量41

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/-walker/p/5279102.html

本文介绍了一种使用CSS实现元素在页面中水平垂直居中的方法。通过设置父级元素的相对定位及margin-top属性，结合transform: translateY(-50%)，能够使子元素无论大小都能精确地居中显示。

水平大家都知道，一般固定宽度给个margin:0 auto；就可以了。下面实现水平垂直都居中

HTML

<div class="parent">

</div>

css

html,body{
    width: 100%;
    height: 100%;
}
.parent{
    width: 750px;
    height: 400px;
    background: orange;
    /*水平居中*/
    margin: 0 auto;
    position: relative;
    top: 50%;
    margin-top: -200px;/*高度的一半*/
}

都居中了。也可以把margin-top:-200;换为CSS3新属性:transform:translateY(-50%);

转载于:https://www.cnblogs.com/-walker/p/5279102.html

CSS实现DIV水平 垂直居中-1

CSS实现DIV水平垂直居中-1