css居中完整篇

inline或inline-*元素水平居中:

这是水平居中的文本
星期一 星期二 星期三 星期四

块级元素水平居中:

这是一个块级元素

同一行多个块级元素水平居中:

我是一个inline-block元素,我的父级是block元素,我的父级元素设置了text-align:center;属性
我是一个inline-block元素,我的父级是block元素,我的父级元素设置了text-align:center;属性
我是一个inline-block元素,我的父级是block元素,我的父级元素设置了text-align:center;属性
我是一个块级元素,我的父级设置了display: flex; justify-content: center;所以我水平居中了。
我是一个块级元素,我的父级设置了display: flex; justify-content: center;所以我水平居中了。
我是一个块级元素,我的父级设置了display: flex; justify-content: center;所以我水平居中了。

单行文本垂直居中:

我是单行文本padding: 20px 0;
我是单行文本height: 63px;line-height: 63px;

多行文本垂直居中:

我是多行文本,通过使用table元素来使内容垂直居中。

我是多行文本,通过使用vertical-align: center;以及声明为table-cell元素,来达到垂直居中。

我是多行文本,通过使用伸缩盒,达到垂直居中。

块级元素垂直居中:

block margin

block translateY

block flexbox

block unset

水平垂直居中盒子:

知道宽高

不知道宽高

flexbox