CSS样式中一些居中问题（水平居中、垂直居中、水平垂直居中）

水平居中

1.父元素固定宽高，子元素设置margin: 0 auto；

2.在子元素中将display设置为inline-block,父元素text-algin设置为center；

垂直居中

1.用flex布局实现垂直居中，主要代码：
html代码：

css代码：

2.用绝对定位实现垂直居中，主要代码：
html代码：

css代码：

水平垂直居中

1.绝对定位，确认宽高设置margin属性为宽高的负一半
代码：

width: 200px; height: 100px;

background-color: crimson;

position: absolute; left: 50%; top: 50%;

margin-left: -100px; margin-top: -50px;

2.绝对定位：不确定宽高，使用transform: translate属性
代码：

width: 200px; height: 100px;

background-color: crimson;

position: absolute; left: 50%; top: 50%;

transform: translate(-50%, -50%);

3.绝对定位，设置left right top bottom属性值设置为0；margin设置成默认auto
代码：

width: 200px; height: 100px;

background-color: crimson;

position: absolute; left: 0; top: 0; right: 0; bottom: 0;

margin: auto;

4.在父层设置flex布局属性（高度根据自己需求设定）
代码：

父层：width: 100%; height: 200px;

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

子层：

width: 200px; height: 100px; background-color: crimson;