垂直水平居中
HTML解构
<div class="container">
<div class="box box_11">1</div>
</div>
<div class="container container_1">
<div class="box box_1">2</div>
</div>
。。。
<div class="container container_7">
<div class="box box_7">7</div>
</div>
CSS的公共属性
.container {
position: relative;
height: 100px;
width: 500px;
border: 1px solid red;
}
.box {
width: 200px;
height: 50px;
border: 1px solid seagreen;
}
使其垂直和水平方向的空间都成为可使用的区域
具体原因:后续博客会介绍
1.
.box_1 {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
2.
.container_7 {
display: grid;
}
.box_7 {
/* 这个元素就是一个格式化高宽的元素 */
margin: auto;
}
3.
.container_4 {
/* 这个元素就是一个格式化高宽的元素 水平和垂直方向都'流'化*/
display: flex;
}
.box_4 {
margin: auto;
}
绝对定位+transform
.box_6 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
flex布局
.container_3 {
display: flex;
align-items: center;
justify-content: center;
}
grid布局
.container_5 {
display: grid;
align-items: center;
justify-items: center;
}
table布局
vertical-align
用来指定行内元素(inline)或表格单元格(table-cell)元素的垂直对齐方式。
.container_2 {
display: table-cell;
vertical-align: middle;
}
.box_2 {
margin-left: auto;
margin-right: auto;
}