居中总结css

居中（在包含块中居中）

水平居中

1）行盒、行块盒水平居中

直接设置行盒父元素：text-align:center;

2）常规流 块盒 水平居中

定宽，左右设置margin为automargin:0 auto;

3）绝对定位或者固定定位元素水平居中

1、left:0; right:0; margin:0 auto;定宽
2、left:50%; transform:translateX(-50%);不定宽定宽都可以

4）flexBox盒子居中

给父盒子设置display:flex;justify-content:center;

垂直居中

1）单行文本垂直居中

设置行高等于整个区域高度

2）行块盒或者块盒多行文本的垂直居中

没有完美方案；
设置上下padding撑开，但是不能知道高度
或者父元素设置display:table-cell;vertical-align: middle;

3）绝对定位的垂直居中

1、top:0; bottom:0; margin:auto 0;定高
2、top:50%; transform:translateY(-50%);不定高定高都可以

4）flexBox盒子居中

给父盒子设置display:flexalign-items:center;
多行文本居中垂直display:flex; align-content:center;

水平垂直居中（结合起来）

1）设置父元素为相对定位，给子元素设置绝对定位，
top: 0; right: 0; bottom: 0; left: 0; margin: auto;

2）设置父元素为相对定位，给子元素设置绝对定位，需要知道宽高
left: 50%; top: 50%; margin-left: --元素宽度的一半px; margin-top: --元素高度的一半px;

3）使用定位属性
设置父元素为相对定位，给子元素设置绝对定位，
left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);

4）使用flex布局实现设置父元素为flex定位，
justify-content: center; align-items: center;