css设置居中的方法

元素div自动居中放置有很多方法，在这里归纳一下。

一、水平居中

1. 内联元素水平居中(可用于内联元素包括inline, inline-block, inline-table, inline-flex）

text-align: center;

2. 块级元素水平居中

margin: 0 auto; width: 800px;

3. flex居中

display: flex; justify-content: center;

二、垂直居中

1. 单行居中

height: 100px; line-height: 100px;

2. 多行居中

display: flex; flex-direction: column; justify-content: center;

或vertical-align: middle; display: inline-block;

3. 块级元素居中

position: absolute; top: 50%; transform: translateY(-50%);

三、水平垂直都居中

1. transform

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

2. flex

display: flex; justify-content: center; align-items: center;

3. table

display: table; text-align: center; vertial-align: middle;