码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-03-15 13:42:54      阅读:210      评论:0      收藏:0      [点我收藏+]

标签:

水平大家都知道,一般固定宽度给个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%);

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

标签:

原文地址:http://www.cnblogs.com/-walker/p/5279102.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!