前端面试必备css布局
1,子元素在父元素居中
结构:
<div class="box">
<div class="son"></div>
</div>
定位(子绝父相)
.box {
width: 500px;
height: 500px;
background-color: red;
position: relative;
}
.son {
width: 100px;
height: 100px;
background-color: blueviolet;
/* 定位(子绝父相) */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
弹性盒子
.box {
width: 500px;
height: 500px;
background-color: red;
/* 弹性盒子 */
display: flex;
justify-content: center;
align-items: center;
}
.son {
width: 100px;
height: 100px;
background-color: blueviolet;
}
把父元素变成表格的的单元格
.box {
width: 500px;
height: 500px;
background-color: red;
/* 把父元素变成表格的单元格 */
display: table-cell;
/* 让子元素垂直居中 */
vertical-align: middle;
}
.son {
width: 100px;
height: 100px;
background-color: blueviolet;
/* 子元素水平居中 */
margin: 0 auto;
}
把子元素变成行内块
.box {
width: 500px;
height: 500px;
background-color: red;
/* 让子元素居中*/
text-align: center;
line-height: 500px;
}
.son {
width: 100px;
height: 100px;
background-color: blueviolet;
/* 把子元素变成行内块 */
display: inline-block;
/* 去除行内快的基线对齐问题 */
vertical-align: middle;