*****6种*****
目录
4.把子盒子转行内块为其设置垂直对其方式,父盒子文本居中行高相同设置垂直对其方式中线对其,
5.子绝父相,子上左50%偏移,转换:平移水平垂直平移-50%
7.table-cell布局,把子盒子转为行内块,父盒子设置以表格单元格形式存在,文本设置居中(水平),垂直对其方式中线对其
<div class="box1">
<div class="box2"></div>
</div>
1.子绝父相,子上下左右0,margin:auto
.box1 {
width: 400px;
height: 400px;
background-color: red;
position: relative;
}
.box2 {
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
2.子绝父相上左50%偏移量margin-上左宽高的一半
.box1 {
width: 400px;
height: 400px;
background-color: red;
position: relative;
}
.box2 {
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
left: 50%;
margin-left: -100px;
top: 50%;
margin-top: -100px;
}
3.父盒子弹性布局主轴交叉轴居中
.box1 {
width: 400px;
height: 400px;
background-color: red;
display: flex;
align-items: center;
justify-content: center;
}
.box2 {
width: 200px;
height: 200px;
background-color: blue;
}
4.把子盒子转行内块为其设置垂直对其方式,父盒子文本居中行高相同设置垂直对其方式中线对其,
.box1 {
width: 400px;
height: 400px;
background-color: red;
text-align: center;
line-height: 400px;
}
.box2 {
width: 200px;
height: 200px;
background-color: blue;
display: inline-block;
vertical-align: middle;
}
5.子绝父相,子上左50%偏移,转换:平移水平垂直平移-50%
.box1 {
width: 400px;
height: 400px;
background-color: red;
position: relative;
}
.box2 {
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
6.弹性布局,子盒子设置外边距auto
.box1 {
width: 400px;
height: 400px;
background-color: red;
display: flex;
}
.box2 {
width: 200px;
height: 200px;
background-color: blue;
margin: auto;
}
7.table-cell布局,把子盒子转为行内块,父盒子设置以表格单元格形式存在,文本设置居中(水平),垂直对其方式中线对其
.box1 {
width: 400px;
height: 400px;
background-color: red;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.box2 {
width: 200px;
height: 200px;
background-color: blue;
display: inline-block;
}