CSS中几种常用居中方案

前言

面试官：“CSS中常用的居中方案有几种？”。
我：“定位+flex布局”。
面试官：”好的，你的情况我知道了，回去等通知吧。“
我：”。。。“
这是我之前面试时的真实经历，当时其实想到的就这两种，我觉得回答也没问题啊。说实话我平时并不怎么注重CSS，遇到不会的问题就直接百度，要多说几种居中方案，我是真的说不上来，没想到会在这儿载了。

HTML基本布局及CSS样式

之后的样式设置都基于以下样式：

<div class="box">
    <div class="center"></div>
  </div>

  <style>
    .box{
      width: 600px;
      height: 600px;
      background: blue;
    }

    .center{
      width: 300px;
      height: 300px;
      background: red;
    }
  </style>

flex布局

flex布局是我最常用的居中方案，今天查资料才发现flex布局居然有两种。
1.父容器flex+justify-content:center;align-items:center:

.box{
  display:flex;
  align-items:center;
  justify-content:center;
}

2.父容器flex布局，子容器:margin:auto;

.box{
  display:flex;
}
.center{
  margin:auto
}

定位

父容器：position:relative+子容器：position:absolute;

.box{
  position: relative;
}
.center{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

这种情况也是比较常用的方法，之前不会flex布局的时候都是用的这种方法，后来学了flex布局后就基本就没用过了。

display:table-cell表格布局

使用table-cell只能实现上下居中，水平居中需要单独处理，如果子容器是块级元素，那么子容器设置margin:auto可实现水平居中;如果子容器是行内元素，则父容器使用text-align:center文字居中实现

.box{
  display: table-cell;
  vertical-align: middle;
}
.center{
  margin:auto;
}

table-cell布局我从来没有使用过，具体好使不我也不清楚，但是居中效果可以达到

grid栅格布局

这种居中方案和flex布局写法一样，也有两种用法：
1.父容器display:grid+justify-content:center;align-items:center

.box{
  display:grid;
  align-items:center;
  justify-content:center;
}

2.父容器grid布局，子容器:margin:auto;

.box{
  display:grid;
}
.center{
  margin:auto
}

grid布局我也只是听说过，在开发中没有具体用到过，听说兼容性不怎么好，不建议使用。

以上就是我找到的几种居中方案，不知道这样回答面试官会不会还是直接让我回去等通知，虽然我还是觉得flex布局加定位就够了，但是这就是现实，有些东西你可以不用，但是你得知道。可能就和鬼谷子说的一样：知世故却不世故，历圆滑而弥天真，善自嘲而不嘲人