实现内容居中的方法

1.flex

通过flex布局的justify-content和align-items可以实现内容居中。关于flex布局的其他用法，在博主的常见布局方式中有提到。

代码演示

  .box {
      width: 300px;
      height: 300px;
      background-color: lightcoral;
      display: flex;
      justify-content: center; /* 水平居中 */
      align-items: center; /* 垂直居中 */
    }

2.grid

 grid实现居中的方式和flex类似，同样在常见布局方式中有介绍grid其他用法。

代码演示：

 display: grid;
      /* place-items: center; */ /* 空间居中，一句搞定 */
      justify-items: center; /* 水平居中 */
      align-items: center; /* 垂直居中 */

3.text-align + line-height

使用text-align:center;实现水平居中，使用line-height:高度;可实现垂直居中

代码演示：

.box {
      width: 300px;
      height: 300px;
      text-align: center; /* 水平居中 */
      line-height: 300px; /* 垂直居中 */
      background-color: lightcoral;
    }

效果演示（以上方法均可实现如下效果）：

 

4.绝对定位 (absolute) + transform

注意：使用绝对定位时，应给父级盒子加上相对定位(relative)

代码演示：

  .box {
      position: relative; /* 相对定位 */
      width: 300px;
      height: 300px;
      background-color: lightcoral;
    }
    .center{
      position: absolute; /* 绝对定位 */
      top: 50%; /* 向右偏移父级盒子的50% */
      left: 50%; /* 向下偏移父级盒子的50% */
      transform: translate(-50%,-50%);  /* 分别向左和右移动自身宽高的50% */
      width: 150px;
      height: 150px;
      /* 文字居中 */
      text-align: center;
      line-height: 150px;
      background-color: lightgreen;
    }

效果演示：

5.table-cell

display:tablecell;会使元素表现的类似一个表格中的单元格td，利用这个特性可以实现文字的垂直居中效果。

•  不要与浮动和绝对定位 一起使用
•  可以实现大小不固定元素的垂直居中
•  margin设置无效，响应padding设置
•  对高度和宽度高度敏感
•  不要对display：table-cell使用百分比设置宽度和高度

代码演示：

.box {
      display: table-cell;
      text-align: center; /* 水平居中 */
      vertical-align: middle; /* 垂直居中 */
      width: 300px;
      height: 300px;
      background-color: lightcoral;
    }
    .center{
     display: inline-block;  /* 转换为行内快元素 */
      width: 150px;
      height: 150px;
      /* 文字居中 */
      text-align: center;
      line-height: 150px;
      background-color: lightgreen;
    }

效果展示：

 实现居中效果的方法还有很多，例如绝对定位+margin等。感觉够用了，就先写到这里……

万事都要全力以赴，包括开心！