CSS水平居中、垂直居中、垂直水平居中所有实用方法一网打尽

今天介绍一下在css使用中用到的居中知识，一共以下3点：

水平居中
垂直居中
水平垂直居中

1、水平居中

水平居中需要考虑3点：

行内或是行内元素居中？
块级元素居中？
多个块级元素居中？

行内或是行内元素居中：

这可以适用于inline, inline-block, inline-table, inline-flex

核心代码：

.center-children{text-align: center;}

块级元素居中：

无论是居中的块级元素的宽度还是父元素的宽度如何，这个方法都可以起作用。

核心代码：

.center-me{margin:auto;}

多个块级元素居中：

此方法有两个

inline-block方法：

父元素设置text-align: center; 居中子元素设置display：inline-block；text-align：left即可。

flex方法：

与左中右布局很像，父元素设置display: flex; justify-content: center;即可。

2、垂直居中

垂直居中需要考虑5点：

一行的行内或是行内元素居中？
多行的行内或是行内元素居中？
知道元素高度的块级元素居中？
未知元素高度的块级元素居中？
浏览器能否支持flex属性？

一行的行内或是行内元素垂直居中：

将行内的padding上下都设置相等即可居中，如果试图将一些不会换行的文本居中就需要加上line-height的高度相等center。

核心代码：

.a{padding-top:30px;padding-bottom:30px;}
.center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}

多行的行内或是行内元素垂直居中：

正常情况下用行内的padding上下设置相等也可以做到居中，但如果这不起作用，则文本所在的元素可能是一个表格单元格，无论是字面上还是表现得像CSS。vertical-align在这种情况下，该属性处理这个问题，不同于它通常处理行内对齐的元素的对齐。

知道元素高度的块级元素垂直居中：

父元素position: relative; 子元素position: absolute;然后top：50%；

核心代码：

.parent{
    position: relative;
}
.child{
    position: absolute;
    top:50%;height:100px;
    margin-top:-50px;/* account for padding and border if not using box-sizing: border-box; */
}

未知元素高度的块级元素垂直居中：

在元素高度的块级垂直居中代码基础上增加transform:translateY(-50%);，top：50%；下降一半，transform:translateY(-50%); 在50%的基础上再上升50%即可居中。

核心代码：

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

flex块级垂直居中：

如果你的浏览器不是IE6~9,那么恭喜你，你可以使用flex属性进行快速的垂直居中~

核心代码：

.parent{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

3、水平垂直居中

水平垂直居中需要考虑4点：
是固定高度和宽度的元素吗？
高度和宽度是未知的元素吗？
浏览器能否支持flex属性？
如果只有一个行内元素？

固定高宽的水平垂直居中：

使用相当于宽度和高度的一半的负边距，父元素相对定位，子元素绝对定位到50％/ 50％，此方法兼容性非常好

核心代码：

.parent{
    position: relative;
}
.child{
    width:300px;
    height:100px;
    padding:20px;
    position: absolute;
    top:50%;
    left:50%;
    margin:-70px 0 0 -170px;
}

未知高宽的水平垂直居中：

如果您不知道宽度或高度，可以使用transform属性和两个方向的负平移（基于元素的当前宽度/高度）为中心

核心代码：

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

flex水平垂直居中：

如果你的浏览器支持flex，可以很简单做到，你需要在父元素中使用两个居中属性

核心代码：

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

gird水平垂直居中：

如你你只需将一个行内元素水平垂直居中，有一个小技巧，使用gird布局可以快速居中

核心代码：

parent {
  height: 100%;
  width: 300px;
  display: grid;
}
child {
  margin: auto;
}

你可以在css中做到所有的这些居中方法，是不是很简单~