目录
1.定位 + margin
.parent{
position: relative;
width: 90px;
height: 90px;
border: 3px solid red;
}
.child{
background: #000000;
width: 50px;
height: 50px;
position:absolute;
top: 0; bottom: 0; left: 0; right: 0;
margin: auto;
}
2.定位 + transform
.parent{
width: 90px;
height: 90px;
border: 3px solid red;
position:relative;
}
.child{
background: #000000;
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
3.flex 布局
.parent {
width: 90px;
height: 90px;
border: 3px solid red;
display: flex;
justify-content: center;
align-items: center;
}
.child{
background: #000000;
}
justify-content
:设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式
align-items
:定义 flex 子项在 flex 容器的当前行的侧轴(纵轴)方向上的对齐方式。
4.grid 网格布局
.parent{
width: 90px;
height: 90px;
border: 3px solid red;
display: grid;
align-items: center;
justify-content: center;
}
.child{
background: #000000;
}
5.table 表格元素
.parent{
width: 90px;
height: 90px;
border: 3px solid red;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.child{
background: #000000;
//设为块级元素
display: inline-block;
}