居中也是 css 中使用频率非常高的知识点，看下面的例题。
<style>
.wp {
border: 1px solid orange;
width: 300px;
height: 300px;
}
.box {
background: green;
width: 100px;
height: 100px;
}
</style>
<body>
<div class="wp">
<div class="box">box</div>
</div>
</body>
使用多种方式实现绿色块的水平和垂直居中。
一、居中元素定宽高
- absolute + 负 margin
设置绝对定位后，自身的定位是相对于定位为非 static 父级的宽高。设置 left 和 top 后，再使 .box 反向偏移自身的宽高一半即可。
.wp {
position: relative;
}
.box {
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
- absolute + calc
与第一种原理相同，写法更简便。
.root {
position: relative;
}
.textBox {
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
}
- absolute + margin auto
依然使用绝对定位，但是设置各个方向的距离都是 0，此时配合 margin 为 auto，就实现了在各个方向上都居中了。
.wp {
position: relative;
}
.box {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
二、居中元素不定宽高
不定宽高的元素居中在开发中更为常见，解决的办法也更多。
<style>
.wp {
border: 1px solid orange;
width: 300px;
height: 300px;
}
.box {
background: green;
}
</style>
<body>
<div class="wp">
<div class="box">box</div>
</div>
</body>
- absolute + transform
该种方式与定宽高的第一种方式也非常相似，只不过不定宽高时无法反向位移自身的一半，
这时就可以利用 CSS3 新增的 transform，transform 的 translate 属性也可以设置百分比，这个百分比是相对于自身的宽和高，在不定宽高时就可以使用。
.wp {
position: relative;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
- lineheight
此种方法是把 box 设置为 inline-block 行内块元素，通过 text-align 可以做到水平居中，同时通过 vertical-align 做到垂直方向上的居中。
.wp {
line-height: 300px;
text-align: center;
font-size: 0px;
}
.box {
font-size: 16px;
display: inline-block;
vertical-align: middle;
line-height: initial;
}
- table
table 在以前经常被用来处理页面布局，但是随着前端的发展，table 渐渐的退出了大家的视野，不过用来处理居中依然好用。
<style>
.wp {
text-align: center;
}
.box {
display: inline-block;
}
</style>
<table>
<tbody>
<tr>
<td class="wp">
<div class="box">test</div>
</td>
</tr>
</tbody>
</table>
- css-table
如果感觉 table 方式代码复杂、产生冗余，那么就可以使用 css-table，采取 table 布局的特性效果，但是不使用 table 元素。
.wp {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.box {
display: inline-block;
}
- flex
flex 是非常新的布局方式，实现居中也异常简单。
.wp {
display: flex;
justify-content: center;
align-items: center;
}
- grid
目前最新的布局方式，功能强大，但受限于兼容性，没有得到广泛的使用。
.wp {
display: grid;
}
.box {
align-self: center;
justify-self: center;
}
完结
如果遇到居中的需求可以参考以下优先级使用
- PC 端有兼容性要求：
宽高固定： absolute + 负 margin
宽高不固定： absolute + transform 和 css-table - PC 端无兼容性要求：flex grid
- 移动端：flex
网友评论