一、水平居中
1. 行内元素水平居中
-
当子元素在父元素上设置text-align: center; 使文字/图片水平居中
text-align: center; 文字水平居中
2. 块级元素水平居中
-
2.1定宽块级元素水平居中
- 给需要居中的块级元素加margin: 0 auto;
- 原理：两侧auto，平分剩余空间，相当于水平居中。
- 一定要设置宽度width值
margin: 0 auto; 定宽块级元素水平居中
-
2.2 不定宽块级元素水平居中(宽度不固定)
-
方法1：设置table：通过给要居中显示的元素，设置display: table,然后再设置margin: 0 auto来实现。
display: table；水平居中
-
方法1：设置table：通过给要居中显示的元素，设置display: table,然后再设置margin: 0 auto来实现。
-
方法2：设置inline-block(多个块状元素)：子元素设置inline-block，同时父元素设置text-align: center;
display: inline-block; 水平居中 -
设置flex布局：把要处理的块状元素的父元素设置display: flex; justify-content: center;
display: flex; 水平居中
二、水平垂直居中
1. 单行文本水平垂直居中
- 设置上下padding相同 + text-align居中
- 利用内边距将内容区域夹在中间
- 常用于父元素无固定高度时
padding相同，text-align居中
2. 绝对定位 + 负margin
绝对定位+负margin实现垂直水平居中
3. 设置伪元素
原理：父元素设置水平居中对齐，然后再设置伪元素，然后让伪元素高度为父元素的100%高度，设置inline-block元素为垂直居中对齐，使子元素与伪元素并排，然后再中间对齐。
伪元素垂直水平对齐
4. display: table-cell
原理：父元素设置为表格的单元格元素，在表格单元格里面的元素设置verticalr-align: center垂直居中+text-align: center水平居中
display: table-cell + vertical-align + text-align: center垂直水平居中
5. position+transform
- transform里的translate偏移的百分比是相对于自身大小，根据左(x轴)和顶部(y轴)，给的参数，从当前元素位置移动，如：translate: (50px 100px)是从左边元素移动50px，并从顶部移动100px。
position+transform
6. flex布局
flex布局实现的垂直水平居中
