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

时间:2023-03-09 19:46:01
CSS实现DIV水平  垂直居中-1

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