css 居中

水平居中

行内元素【水平居中】，设置父元素为块级元素,在设置 text-align 为 center

.parent {
    display: block;
    text-align: center;
}

块级元素【水平居中】

定宽：谁居中, 谁设置 margin: 0 auto

不定宽：需要将自身转换为行内元素[ display: inline-block| inline ],在以行内元素的形式设置。

定位属性居中

首先设置父元素为相对定位，子元素为绝对定位，子元素设置 left：50%; 这时候子元素的左上角就水平居中了。

        宽度固定：margin-left：width/2 px |  transform: translateX(-50%)

        不定宽度：transform: translateX(-50%)

弹性盒模型

设置父元素：display: flex; justify-content: center;

垂直居中

单行行内元素：设置 子元素的高度 等于 父元素的高度。

多行行内元素：设置父元素 display:table-cell  和 vertical-align: middle

块级元素

首先设置父元素为相对定位，子元素为绝对定位，子元素设置 top：50%; 这时候子元素的左上角就垂直居中了。

 宽度固定：margin-left：width/2 px |  transform: translateY(-50%)

不定宽度：transform: translateY(-50%)

弹性盒模型

设置父元素：display: flex; align-items: center;

水平垂直居中

1. 高宽已知：父元素相对定位，子元素绝对定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto;

2. 高宽已知：父元素相对定位，给子元素绝对定位，left: 50%; top: 50%; margin-left: width/2px; margin-top: height/2px;

3.未知高宽：父元素相对定位，子元素绝对定位，left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);

4.弹性盒模型： display: flex; align-items: center;vertical-align: middle；