CSS 水平/竖直居中小集合

平常前端开发的时候经常遇到这样的问题，时不时就会忘记，今天就想一次性把所有 CSS居中 的方法进行总结，当做自己的备忘录

一、水平居中

概括：

1. 内联元素 text-v
2. 块级元素 margin: 0px auto;
3. 多块级元素，将块级元素设置为 inline-block,再通过 text-align
4. flex 布局 justify-content: center

二、垂直居中

概括：

1.单行元素：height 和 line-height 设置一样的高度

2. table 布局，父元素设置 display: table ，子元素设置 display: table-cell; vertical-align: center
3. flex 布局 align-center:center
4. CSS3 transform 属性，结合绝对位置，实现垂直居中，部分浏览器会有兼容性问题

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

三、水平+垂直 布局

1. flex 双重属性设置居中
2. table + 设置宽度+ margin 来完成（兼容性有较好的的保证）
3. 未知宽高元素，通过 transform + absolute

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

4. 固定宽高——通过设置 absolute 和 margin 反向设置进行
5. grid 布局（不清楚后期补）

以下是上方部分的详细例子

---

二、垂直居中

1. 单行内联元素垂直居中

line-height、height 配合单行垂直居中

通过 height line-height 配合进行垂直居中

line-height 属性设置行间的距离（不允许为负值）

这个距离是两行之间基线的举例，看下图会很清楚

image.png

定义height 的五种方式：

1.line-height可以被定义为：body{line-height:normal;}

2.line-height可以被定义为：body{line-height:inherit;}

3.line-height可以使用一个百分比的值body{line-height:120%;}

4.line-height可以被定义为一个长度值(px,em等) body{line-height:25px;}

5.line-height也可以被定义为纯数字， body{line-height:1.2}—————会通过font-size 自动进行调节

更详细的例子在这里查看 深入了解css的行高Line Height属性

2.多行垂直居中

table 多行垂直居中

3. Flex 布局

通过设置 flex 布局的交叉轴方向即可 align-items: center

image.png

三、水平垂直居中

1. 未知宽高元素水平垂直居中

利用 2D 变换

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

利用 flex 布局

设置 主轴方向 justify-content 和 交叉轴方向 align-center （也就是纵轴）为 center 就可以达到居中

table布局

结合开始 table 垂直居中，外层设置 display:table，内层设置 display: table-cell;vertical: center，最后在通过水平垂直的方法完成

引用参考

CSS line-height概念与举例
深入了解css的行高Line Height属性
这15种CSS居中的方式，你都用过哪几种？