CSS样式：水平居中的方法总结

1 样式属性描述

先来一段代码进行展示：

father{							/* 父级元素 （块级元素）*/
	width:500px;
	height:300px;
	background:pink;
	margin:100px auto;
	text-align:center;
}
.father img{					/* 行块级元素 */
	width:100px;
	vertical-align:bottom;
}
.father .son{					/* 没有宽高的子级（块级元素） */
		background:orange;
			}
.father p{						/* 有宽高的子级（块级元素） */
		width:200px;	
		height:20px;
		background:skyblue;
}
.father span{				/*子级是行内元素*/
		background:yellow;
}

<div class="father">
	<img src="img./1.jpg" alt="">
	<div class="son">我是div</div>
	<p>我是块级元素p</p>
	<span>我是行级元素span</span>
</div>

效果如图所示：

总结：text-align的使用规则：
（0）： 默认情况下：元素和文字都是左对齐 。
（1）只在块元素中使用，直接用在内联元素上不生效。
（2）对块元素内是行内元素和行块级元素都有居中效果。
（3）对于块级元素内部也是块级元素时，内部块级元素继承了父级的text-align属性，然后对包含在其中的文本进行居中对齐。
3.1 .son子级块级元素没有设置宽高：宽度与父级一致，高度由文本撑开，文本相对于子级居中。
3,2 p子级有宽高时，子级与父级左上角对其，文字在子级内居中。

3 水平居中

总结：
（1）行内元素水平居中
1.1 父级是块级，直接给父级text-align。
1,2 父级不是块级，先将父级转为块级，在给父级text-align。
（2）块级元素水平居中
2.1 使用margin：0 auto；居中
2.2 转为行内元素或行块级元素
2.3 使用定位属性
方法一：元素定位居中（左右为0居中）
方法二：元素定位居中（拉伸法）
方法三：使用transform函数
2.4 使用flex布局

（1）行内元素水平居中
1.1 首先看其父级是不是块级元素，如果是则直接给父元素设置：
text-align:center;

div{
	width:300px;
	height:100px;
	background:pink;
	text-align:center;
	}
<div>
	<span>我是行内元素</span>
</div>

1.2 其父级若不是块级元素，则先将父级先转为块级元素，然后再给父元素设置：text-align:center;

.father{
			width:300px;
			height:100px;
			background:pink;
			display:block;	/* 父级转为块级元素 */
			text-align:center;
		}
<span class="father">
	<span class="son">我是行内元素</span>
</span>

以上在网页中效果：

（2）块级元素水平居中

方案一：使用margin：auto；居中
当已知块级元素的宽度时，给予内部块级元素margin：0 auto；其作用就是子级相对父级居中。补充：若也想使父级居中，也可以另外给margin设置居中。

div{
	width:400px;
	height:200px;
	background:skyblue;
	margin:0 auto;		/* 父级水平居中 */
}
p{
	width:50px;
	height:50px;
	background:yellowgreen;
	margin:0px auto;	/* 子级在父级内水平居中 */
}
<div>
	<p>我是块级元素</p>
</div>

效果如图所示：

方案二：转为行内元素或行块级元素
当子级元素宽度不确定之时，默认子元素的宽度和父元素一样，这时需要设置子元素为display: inline-block; 或 display: inline;（）即将其转换成行内块级/行内元素，再给父元素设置 text-align:center;

.father{
		width:400px;
		height:200px;
		background:skyblue;
		margin:0 auto;		/* 父级水平居中 */
		text-align:center;
	}
.son{
		background:yellowgreen;
		display:inline;		/* 转为行内元素 */
		text-align:center;
	}
<div class="father">
	<p class="son">我是块级元素</p>
</div>

补充：.son转为行内元素后，设置宽高没有效果，内容的高度撑起.son的高度。
效果如图所示：

方案三：使用定位属性
首先设置父元素为相对定位，再设置子元素为绝对定位。
方法一：元素定位居中（左右为0）,子元素宽度可以不确定。

.father{
			width:500px;
			height:200px;
			background:orange;
			position:relative;
	}
.son{
		width:50px;
		height:50px;
		background:pink;
		position:absolute;
		right:0;
		left:0;
		margin:auto;
	}
<div class="father">
	<div class="son">我是块级元素</div>
</div>

方法二：元素定位居中（拉伸法），需要在已知子元素的宽度前提下使用。

.father{
		width:500px;
			height:200px;
			background:orange;
			position:relative;
	}
.son{
		width:50px;
		height:50px;
		background:pink;
		position:absolute;
		left:50%;
		margin-left:-25px;
	}
<div class="father">
	<div class="son">我是块级元素</div>
</div>

方法三：利用css3新增属性transform: translateX(-50%);

.father{
		width:500px;
		height:200px;
		background:orange;
		position:relative;
	}
.son{
		width:50px;
		height:50px;
		background:pink;
		position:absolute;
		left:50%;
		transform:translateX(-50%);
	}
<div class="father">
	<div class="son">我是块级元素</div>
</div>

效果图：

方案四：使用flexbox布局实现（宽度定不定都可以）
使用flexbox布局，只需要给待处理的块状元素的父元素添加属性 display: flex; justify-content: center;

.father{
			width:500px;
			height:200px;
			background:#ff00cc;
			display:flex;
			justify-content:center;
	}
.son{
			width:50px;
			height:50px;
			background:#00ff66;
	}
<div class="father">
	<div class="son">我是块级元素</div>
</div>

效果如图所示：