CSS布局 之 水平居中、垂直居中

CSS水平居中、垂直居中一样都是前端设计师的基本功

下面来详细解答一下行内元素、块级元素水平垂直居中的案例

1. 水平居中

1.1 out 为块级元素，in 不管是行内、行内块、块级，使用flex，都会水平居中

.out {
	display: flex;
	justify-content: center;
}

```html
<div class="out">
	<div class="in"></div>
</div>

1.2 out 为块级，in 为行内元素

text-align: center 可以设置行内子元素水平居中，但不能设置块级子元素居中

1.2 out 为块级，in 为行内块元素

行内块的直接text-align: center;

<div class="out">
	<button class="in">按钮</button>
</div>

.out {
	text-align: center;
}

1.3 out 、in 均为 块级元素

margin: 0 auto

margin: 0 auto; 就可以实现了

<div class="out">
	<div class="in">in</div>
</div>

.in {
	margin: 0 auto;     
}

2. 垂直居中

2.1 out 为块级元素，in 不管是行内、行内块、块级，使用flex，都会垂直居中

/* 方法 1 */
.out {
	display: flex;
	align-items: center;
}
/* 方法 2 */
.out {
	display: flex;
}
.in {
	align-self:center;
}

<div class="out">
	<div class="in"></div>
</div>

2.2 out 为块级，in 为行内元素

设置 line-height 高度和父元素高度一样就垂直居中了

<div class="out">
	<span class="in">in</span>
</div>

.in {
	height: 150px;
	line-height: 300px;
}

2.3 out 为块级，in 为行内块元素

<div class="out">
	<button class="in">in</button>
</div>

/*方法1 */
.in {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}
/*方法2 */
.out {
	position: relative;
}
.in {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

2.4 out 为块级，in 为块级元素

<div class="out">
	<div class="in">in</div>
</div>

/*方法1 
* 建议 用方法2 优过 方法1
*/
.in {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}
/*方法2
* 该方法支持IE9+，包含IE9
* 子元素的宽高未知 
*/
.out {
	position: relative;
}
.in {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

/*方法3
* 该方法兼容到IE8+,包含IE8
* 子元素的宽高已知
*/
.out {
	width: 300px;
	height: 300px;
	position: relative;
	background-color: #ff9665;
}
.in {
	width: 150px;
	height: 150px;
	background-color: #fff231;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto
}

/*方法4
* 该方法兼容到所有支持绝对定位的浏览器，IE6+
* 子元素的宽高已知
*/
.out {
	width: 300px;
	height: 300px;
	position: relative;
	background-color: #ff9665;
}
.in {
	width: 150px;
	height: 150px;
	background-color: #fff231;
	position: absolute;
	top: 50%;
	margin-top: -50px;
}