复合场景的居中的几种实现方式

知识点：复合元素居中，分为水平居中和垂直居中。

1、水平居中

(1) text-align: center;适用范围，行内元素的居中。

行内元素在父元素里水平居中。

html

css

(2) margin: 0 auto; 适用范围：块级元素水平居中。

margin:0 auto;

2、垂直居中

(1) 借助table-cell,缺点是容器的margin属性失效了，解决方法：在容器外层再嵌套一个div,设置div的margin属性。

首先需要设置父元素dispaly:table-cell;vertical-align-middle;

table-cell

(2) 使用相对定位和绝对定位 relative和absolute

设置父级元素为相对定位，需要居中的元素为绝对定位：这里有子元素有确定宽高和不确定宽高的情况。

1、确定宽高

确定宽高的情况

2、子元素不确定宽高

l

子元素不定宽高

(3) 终极杀器---flex

利用flex布局，只需3行既可以完美实现

flex弹性布局