【CSS - 水平居中】

1. 文本、行内元素、行内块元素

#param {
	text-align: center;
}

2. 单个块级元素

#son {
	width: 100px; // 必须定宽
	margin: 0 auto;
}

3. 多个块级元素

text-align: 只控制行内内容（文字、行内元素、行内快级元素），如何相对于块父元素对齐

#parent {
	text-align: center;
}

.son {
	display: inline-block;
}

4. 使用绝对定位实现

原理： 子绝父相
top、right、bottom、left的值是相对于父元素尺寸的
margin或transform相对于自身尺寸的，组合使用达到水平居中目的

#parent {
	height: 200px;
	width: 200px;
	position: relative;
	background-color: #f00;
}

#son {
	position: absolute; 
	left: 50%;
	transform: translateX(-50%);
	width: 100px;
	height: 100px;
	background-color: #00ff00;
}

5. 任意个元素（flex）

设置当前主轴对齐方式为居中。
flex无法是主轴侧轴是重点，然后就是排列方式的设置

#parent {
	display: flex;
	justify-content: center;
}

对于水平居中总结

【首先考虑】： text-align: center 只对行内内容有效
要使用text-align:center就必须将元素设置为 display:inline 或者 display:inline-block
【其次考虑】： margin: 0 auto; 实在不行采用绝对定位实现
【移动端】能使用flex就使用flex，灵活切功能强大