CSS

1、使用 margin:auto

当元素有给定的高度以及宽度的时候，使用 margin: auto; 元素仅会水平居中，并不会进行垂直居中。此时就需要设置元素的 position 为 absolute，父级元素的 position 为 relative，同时元素的上下左右都需要设置为 0。

HTML 代码

  1. <div class="box">
  2.   <div class="center1"></div>
  3. </div>

CSS 代码

  1. .box{
  2.     width: 200px;
  3.     height: 200px;
  4.     background-color: #eee;
  5.     position: relative;
  6.     margin-top: 20px;
  7. }
  8. .center1{
  9.     width: 50px;
  10.     height: 50px;
  11.     background-color: #00ACED;
  12.     margin: auto;
  13.     position: absolute;
  14.     top: 0;
  15.     left: 0;
  16.     right: 0;
  17.     bottom: 0;
  18. }

效果展示：

CSS 中几种最常用的水平垂直居中的方法 - 图1

2、使用 position:absolute

当已经知道了要进行水平垂直居中的元素的宽高时，就可以通过设置 position: absolute 来实现。但是，使用的同时还需要结合其他属性才完整实现。因为，单是设置 absolute，上左距离均为一半，就会出现下面这种情况。很显然可以看到，元素并不是完全居中，仅只有左上角的位置在中心点

概念图：

CSS 中几种最常用的水平垂直居中的方法 - 图2
因此想要实现元素完全水平垂直居中，在设置了 absolute 定位后，可以设置 margin 值为负，或者使用 calc 来计算，上左距离在 50% 的基础上还要减去元素本身一半的宽高。
margin 值为负或者 calc 计算均是在已知元素宽高的情况下，假设不知道元素的宽高，那么怎么实现水平垂直居中呢？这里就可以使用 transform 属性，通过坐标位移来实现居中。

CSS 代码

  1. /* 结合 margin */
  2. .center2{
  3.     width: 50px;
  4.     height: 50px;
  5.     background-color: #7FFFD4;
  6.     position: absolute;
  7.     left: 50%;
  8.     top: 50%;
  9.     margin-left: -25px;
  10.     margin-top: -25px;
  11. }
  12. /* 结合 calc 计算*/
  13. .center2{
  14.     width: 50px;
  15.     height: 50px;
  16.     background-color: #7FFFD4;
  17.     position: absolute;
  18.     left: calc(50% - 25px)
  19.         top: calc(50% - 25px);
  20. }
  21. /* 结合 transform */
  22. .center2{
  23.     width: 50px;
  24.     height: 50px;
  25.     background-color: #7FFFD4;
  26.     position: absolute;
  27.     left: 50%;
  28.     top: 50%;
  29.     transform: translate(-50%, -50%);
  30. }

效果展示

CSS 中几种最常用的水平垂直居中的方法 - 图3

3、使用弹性布局

可以通过弹性布局来设置水平垂直居中，这里需要设置父级元素 display:flex; 还需要设置两个属性，水平布局 justify-content 以及垂直布局 align-items。

HTML代码

  1. <div class="box2">
  2.   <div class="center4"></div>
  3. </div>

CSS代码：

  1. .box2{
  2.   background-color: #eee;
  3.   width: 200px;
  4.   height: 200px;
  5.   position: relative;
  6.   margin-top: 20px ;
  7.   display: flex;
  8.   justify-content: center;
  9.   align-items: center;
  10. }
  11. .center4{
  12.   width: 50px;
  13.   height: 50px;
  14.   background-color: #B39873;
  15. }

效果展示：

CSS 中几种最常用的水平垂直居中的方法 - 图4

4、文本水平对齐和行高

前面介绍的是元素如何实现水平垂直居中，下面介绍的是如何将文字进行水平垂直居中。这第一个方法也是最经常用的，使用文本水平对齐 text-align 和行高 line-height 来实现的。

HTML 代码

  1. <div class="box3">
  2.   <div class="center5">文字居中</div>
  3. </div>

CSS 代码

  1. .box3{
  2.   background-color: #eee;
  3.   width: 200px;
  4.   height: 200px;
  5.   margin-top: 20px;
  6. }
  7. .center5{
  8.   text-align: center;
  9.   line-height: 200px;
  10. }

效果展示

CSS 中几种最常用的水平垂直居中的方法 - 图5

5、使用网格布局

第二个方法可以通过网格布局 grid 来实现。而这里通过 grid 有两种方式实现，一种对元素本身属性进行设置，另一种在元素的父级元素中设置。两者看上去内容似乎差不多，不同的是在元素中设置的是 align-self 还要多了一个 margin，父级元素中是 align-items。

相关代码：

  1. /* grid 元素中设置 */
  2. .box4{
  3.     background-color: #eee;
  4.     width: 200px;
  5.     height: 200px;
  6.     margin-top: 20px;
  7.     display: grid;
  8. }
  9. .center6{
  10.     align-self: center;
  11.     justify-content: center;
  12.     margin: auto;
  13. }
  14. /* grid 父级元素中设置 */
  15. .box5{
  16.     background-color: #eee;
  17.     width: 200px;
  18.     height: 200px;
  19.     margin-top: 20px;
  20.     display: grid;
  21.     align-items: center;
  22.     justify-content: center;
  23. }

效果展示：

CSS 中几种最常用的水平垂直居中的方法 - 图6