8种CSS居中实现的详细实现方式
开篇之前,先问一下大家都知道几种居中的实现方式?
面试时答出来两三个就不错了,就怕面试官还让你继续说。今天就来总结一下这些居中的方式
1、flex布局-设置居中
常见的一种方式就是使用 flex
布局设置居中。
利用弹性布局(flex
),实现水平居中,其中 justify-content
用于设置弹性盒子元素在主轴(横轴)方向上的对齐方式
给容器设置:
display: flex;
写在父元素上这就是定义了一个伸缩容器justify-content
主轴对齐方式,默认是横轴align-items
纵轴对齐方式,默认是纵轴
优点: 简单、方便、快速,三行代码搞定。
<div class="box">
<div class="child">水平垂直居中</div>
</div>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid;
display: flex;
align-items: center; // 纵轴对齐方式,默认是纵轴 子元素垂直居中
justify-content: center; //纵轴对齐方式,默认是纵轴
}
.child {
background: red;
}
</style>
2、flex-给子项设置
第一种方式是给父盒子设置属性,这一种是给子盒子设置 margin: auto
实现居中。给容器设置 display: flex;
子项设置 margin: auto;
<div class="box">
<div class="child">水平垂直居中</div>
</div>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid;
display: flex;
}
.child {
background: red;
margin: auto; // 水平垂直居中
}
</style>
3、绝对定位
使用绝对定位的方式实现水平垂直居中。容器设置 position: relative
。子元素设置 position: absolute
; left: 50%
; top: 50%
; transfrom: translate(-50%, -50%)
;
优点就是不用关心子元素的长和宽,但是这种方法兼容性依赖 translate2d 的兼容性
<div class="box">
<div class="child">水平垂直居中</div>
</div>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid;
position: relative;
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: red;
}
</style>
4、tabel-cell 实现垂直居中
css 新增的 table 属性,可以让我们把普通元素,变为 table 元素的现实效果,通过这个特性也可以实现水平垂直居中
而且 tabel 单元格中的内容天然就是垂直居中的,只要添加一个水平居中属性就好了
使用 tabel-cell 实现垂直居中,容器设置
display: table-cell;
;vertical-align: middle
属性设置元素的垂直对齐方式子元素如果是块级元素,直接使用左右
margin:auto
实现水平居中。如果是行内元素,给容器设置text-align: center
利用 text-align: center
可以实现在块级元素内部的内联元素水平居中。此方法对内联元素 inline
, 内联块 inline-block
, 内联表 inline-table
, inline-flex
元素水平居中都有效。
<div class="box">
<div class="child">水平垂直居中</div>
</div>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid;
display: table-cell;
vertical-align: middle; // 设置元素在垂直方向上的对齐方式
text-align: center;
}
.child {
background: red;
display: inline-block;
}
</style>
5、grid 设置居中
使用 grid 设置居中。给容器设置
display: grid;
align-items: center;
justify-content: center;
通过给容器设置属性,达到居中效果,但是这种方式兼容性较差,不推荐。
<div class="box">
<div class="child">水平垂直居中</div>
</div>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid;
display: grid;
align-items: center;
justify-content: center;
}
.child {
background: red;
}
</style>
6、grid 给子项设置
使用 grid 时还能通过给子项设置 margin: auto;
实现居中。给容器设置 display: grid;
子项设置 margin: auto;
某些浏览器会不支持 grid 布局方式,兼容性较差,不推荐。
<div class="box">
<div class="child">水平垂直居中</div>
</div>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid;
display: grid;
}
.child {
background: red;
margin: auto;
}
</style>
7、给容器加给伪元素
这是一种不常用的方法实现垂直居中。给容器加给伪元素,设置 line-height
等于容器的高度。给孩子设置 display: inline-block
;
<div class="box">
<div class="child">水平垂直居中</div>
</div>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid;
text-align: center;
}
.box::after {
content: "";
line-height: 200px;
}
.child {
display: inline-block;
background: red;
}
</style>
8、还有一种奇葩的方法
这个奇葩方式和第三种使用绝对定位相似,只不过需要给子元素设置 position: absolute
; 设置固定宽度和高度;top、left、bottom、right
都设置为 0; margin 设置为 auto;也能实现垂直水平居中。
<div class="box">
<div class="child">水平垂直居中</div>
</div>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid;
position: relative;
}
.child {
background: red;
width: 100px;
height: 40px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
以上就是一些我们常用的垂直居中的方案。
- 感谢你赐予我前进的力量