<div class="parent">
<div class="child">
hehehe
</div>
</div>
1.水平居中
a.子元素是内联元素时,对父元素设置text-align为center。示例
.parent{
border: 1px solid blue;
margin: 0 auto;
text-align:center;
}
子元素是固定宽度对div时,设置左右margin为一样对
b.利用绝对定位,设置子元素偏移量为剩下宽度的一半。示例
.parent{
border: 1px solid blue;
position:relative;
height:100px;
}
.child{
position:absolute;
border: 1px solid red;
left:50%;
transform:translateX(-50%);
}
2.垂直居中
a.子元素的上下margin设置为相同。示例
.parent{
border:1px solid green;
}
.child{
border:1px solid red;
margin: 10px 0;
}
b.绝对定位,设置子元素的top为50%,transform:translateY(-50%)。示例
.parent{
border:1px solid green;
position:relative;
height:100px;
}
.child{
border:1px solid red;
position:absolute;
top:50%;
transform:translateY(-50%);
}
网友评论