居中问题

CSS中的居中问题理解与归纳

水平居中

（1）inline或inline-block、inline-table、inline-flex元素

直接{text-align：center}

（2）block元素

有一个固定的宽度

{margin：0 auto}

（3）不止一个block元素

如果要把n个block元素居中排列在一行，可以把block元素display成inline-block，再用（1）中的办法。

如果要把多个block元素排列成多行居中，（2）中的方法还是可行的。

垂直居中

（1）inline或inline-block、inline-table、inline-flex元素

1）单行

两种方法，第一种方法，用padding，（equal padding above and below them.）

第二种方法：height=line-height

2）多行

第一种方法：Equal padding on top and bottom

第二种方法：

用table，table默认是verticla-align：center

CSS如下：

第三种方法：flexbox弹性布局，用来为盒状模型提供更大的灵活性

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

这是介绍flexbox布局的网页

第四种方法：虚元素

（2）block元素

1）已知元素的高度

margin-top是块级元素高度的一半

2）元素的高度未知

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

3）flexbox

水平垂直同时居中

1）已知元素宽度和高度

2）元素宽度

3）flexbox