一、position 子元素已知宽度
-
父元素设置为：position: relative;
-
子元素设置为：position: absolute;
要点：子元素距上50%，距左50%，外边距设置为自身宽高的一半
<div class="parent">
<div class="child"></div>
</div>
.parent {
background: #f00;
width: 400px;
height: 400px;
position: relative;
}
.child {
background: #00f;
width: 200px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -100px;
}
二、position+transform 子元素已知宽度
-
父元素设置为：position: relative;
-
子元素设置为：position: absolute;
要点：子元素添加 transform: translate(-50%,-50%);
<div class="parent">
<div class="child"></div>
</div>
.parent {
background: #f00;
width: 400px;
height: 400px;
position: relative;
}
.child {
background: #00f;
width: 200px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
三、flex布局
-
父元素可不设置宽高
-
子元素必须设置宽高
要点：父元素添加 display: flex; justify-content: center; align-items: center;
<div class="parent">
<div class="child"></div>
</div>
.parent {
background: #f00;
width: 400px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
}
.child {
background: #00f;
width: 200px;
height: 100px;
}
四、table-cell布局
-
外层元素设置为 display: table;
-
中间元素设置为 display: table-cell;
-
内层元素设置为 display: inline-block;
要点：
-
三层元素嵌套
-
中间元素的table-cell相当于表格的td，td为行内元素，所以需要再嵌套一层
-
内嵌元素必须设置 display: inline-block;
-
中间元素table-cell的背景色会覆盖父元素的背景色
<div class="box">
<div class="content">
<div class="inner"></div>
</div>
</div>
.box {
background: #f00;
width: 400px;
height: 400px;
display: table;
}
.content {
background: #00f;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.inner {
background: #000;
display: inline-block;
width: 200px;
height: 100px;
}
