8种css居中实现的详细实现方式了

这是一篇关于居中对齐方式的总结

开篇之前，先问一下大家都知道几种居中的实现方式？

面试时答出来两三个就不错了，就怕面试官还让你继续说。今天就来总结一下这些居中的方式

1. 使用flex布局设置居中。
2. 使用flex 时也能通过给子项设置margin: auto实现居中。
3. 使用绝对定位的方式实现水平垂直居中。
4. 使用grid设置居中。
5. 使用grid时还能通过给子项设置margin: auto实现居中。
6. 使用tabel-cell实现垂直居中。
7. 还有一种不常用的方法实现垂直居中。
8. 最后还有一种奇葩的方法。容器设置position: relative。孩子设置 top、left、bottom、right都设置为0

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设置居中

1. 使用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>

代码片段

以上就是一些我们常用的垂直居中的方案。