正文

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

IP云
IP云V管理员/5 阅读
06/16
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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