水平居中、垂直居中、水平垂直居中的方法

1、水平居中

1.1、让内联元素居中：给父级元素设置 text-align:center

1.2、让块级元素居中：给块级元素本身设置 margin: 0 auto; width:300px; 一定要固定该块级元素的宽度，不然块级元素默认是100%的。那么久起不到水平居中的效果了。

如果有多个块级元素需要水平居中在一行，那么对块级元素设置 display: inline-block; ，并对其父级元素设置 text-align:center。

<div style="border: 1px solid red; text-align:center">
    <div style="border: 1px solid blue;display: inline-block;">这里是块级元素，居中了吗？</div>
    <div style="border: 1px solid blue;display: inline-block;">这里是块级元素，居中了吗？</div>
</div>

展示效果如下：

2、垂直居中：

让内联元素垂直居中：给父级元素设置height、line-height，且他俩的值保持相等。 让块级元素垂直居中： 子元素宽高确定的情况下，使用position: absolute + 负margin 子元素宽高不确定的，使用position: absolute + transform

eg：给父级元素设置 position: relative;
如果子元素宽高确定，就给本块级元素设置如下：

position: absolute;
height:100px;
width: 100px;
top: 50%;
left:50%;
margin-left: -50px; // 子元素宽的一半
margin-top: -50px; // 子元素高的一半

如果子元素宽高不确定，就如下：

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

但是上述不能并列存在，如同一个父元素，包含了上述两个子div，就会导致

3、垂直水平居中：

子元素宽高确定的情况下，使用position absolute + 负margin 子元素宽高不确定的，使用position absolute + transform

当然还有万能的flex布局

justify-contents: center;
align-items: center;