純css 無視寬高設置垂直水平居中

1. flex的居中。(IE10+)

.parent {
	display: flex;
	justify-content: center;
	align-items: center;
}
複製代碼

或

.parent {
	display: flex;
}
.child {
	margin: auto;
}

複製代碼

2. 先移動父級的50%,再利用 translate往回移動自身的50%。(IE9+)

.child {
	margin-top: 50%;
	margin-left: 50%;
	transform: translate(-50%,-50%);
}

複製代碼

或

.parent {
	position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
複製代碼

3. 利用position和 margin。 (IE8+)

.parent {
	position: relative;
}
.child {
	position: absolute;
	top: 0;
	buttom:0;
	left: 0;
	roght: 0;
	margin: auto;
}
複製代碼

4. 經過display:table-cell來把.parent模擬成一個表格單元格，利用表格的居中特性。(IE8+)

.parent {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
複製代碼

5. 利用 :after 僞選擇器佔位. (IE8+)

• IE8的僞選擇器要使用:after，更新版的瀏覽器能夠使用 :after 和::after

.parent {
	text-align: center;
}

.child {
	display:inline-block;
	vertical-align: middle;
}
.parent:after {
	content: "";
	vertical-align: middle;
	height: 100%;
	display: inline-block;
}

複製代碼