CSS中几种常用的居中实现方案

一.水平居中

先看html代码：

<div class="div1">
    <div class="div2">div2</div>
</div>

1.1内联元素的水平居中

使用text-align:center; CSS样式代码如下：

.div1 {
    width: 300px;
    height: 300px;
    border: 1px solid red;
    text-align: center;
}
.div2 {
    width: 100px;
    height: 100px;
    border: 1px solid red;
    display: inline-block;/*声明为内联块*/
    /*display: inline;*/
    /*display: inline-table;*/
    /*display: inline-flex;*/
    /*display: inline-grid;*/
}

其中注释的几种方式均有效果

1.2块级元素水平居中

CSS代码如下：

.div1 {
    width: 300px;
    height: 300px;
    border: 1px solid red;
}
.div2 {
    width: 100px;
    height: 100px;
    border: 1px solid red;
    margin: 0 auto;
}

其中，只需在div2中添加margin： 0 auto；即可。

二.垂直居中

2.1单行内联元素垂直居中

html代码：

<div class="div1">
    <span>内联元素</span>
</div>

CSS代码：

.div1 {
    width: 300px;
    height: 300px;
    border: 1px solid red;
    line-height: 300px;
}

关键代码：line-height = height；需要注意的是，利用行高实现居中并非绝对的垂直居中

三.水平垂直居中

3.1 绝对定位+margin:auto

条件：宽高固定

使用绝对定位，CSS代码：

.div1 {
    width: 300px;
    height: 300px;
    border: 1px solid red;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}

3.2 绝对定位+margin负值

条件：宽高固定

使用定位加margin，CSS代码：

.div1 {
    width: 300px;
    height: 300px;
    border: 1px solid red;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -150px;
}

3.3 绝对定位+translate

可以不限制宽高

使用定位加translate，CSS代码：

.div1 {
    width: 300px;
    height: 300px;
    border: 1px solid red;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

3.4 绝对定位+fit-content+margin:auto

可以不限制宽高

注意: fit-content 属性值在 Edge12～Edge18 版本以及 IE 浏览器中不支持，移动端可以放心使用

使用fit-content

.div1 {
  width: fit-content;
  height: fit-content;
  border: 1px solid red;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

3.5 弹性布局

使用flex布局，CSS代码：

.div1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 500px;
    border: 1px solid red;
}
.div2 {
    width: 300px;
    height: 300px;
    border: 1px solid red;
}

居中的方法远不止上面几种，更多的方法可以参考以下链接：

CSS居中方法

（一） 前端面试：三栏布局