css水平垂直居几种方式总结

1.水平对齐+行高
【方式1】text-align + line-height实现单行文本水平垂直居中

	<style>
		.f1 .test {
			text-align: center;
			line-height: 100px;
		}
	</style>
	<!--1.水平对齐+行高-->
	<div class="case-box f1">
		<div class="test" style="background-color: lightblue;width: 200px;">水平对齐+行高</div>
	</div>

效果1：

2.水平+垂直对齐
【方式2】text-align + vertical-align
【1】在父元素设置text-align和vertical-align，并将父元素设置为table-cell元素，子元素设置为inline-block元素

	<style>
		.f2 .parent {
			display: table-cell;
			text-align: center;
			vertical-align: middle;
		}

		.f2 .child {
			width: 80px;
			display: inline-block;
		}
	</style>
	<div class="case-box f2">
		<div class="parent" style="background-color: gray; width:200px; height:100px;">
			<div class="child" style="background-color: lightblue;">水平+垂直对齐</div>
		</div>
	</div>

效果2（1）：

【2】若子元素是图像，可不使用table-cell，而是其父元素用行高替代高度，且字体大小设为0。子元素本身设置vertical-align:middle

	<style>
		.f3 .parent {
			line-height: 200px;
			text-align: center;
			font-size: 0;
		}

		.f3 .child {
			vertical-align: middle;
		}
	</style>
	<div class="case-box f3">
		<div class="parent" style="background-color: gray; width:200px;">
			<img class="child" src="https://img2.baidu.com/it/u=4126704565,802907532&fm=26&fmt=auto" style="width:50px;"
				alt="test">
		</div>
	</div>

效果2（2）：

3.margin + vertical-align
【方式3】text-align + vertical-align

	<style>
		.f13 .parent {
			display: table-cell;
			vertical-align: middle;
		}

		.f13 .child {
			display: table;
			margin: 0 auto;
		}
	</style>
	<div class="case-box f13" data-case="f13">
		<div class="parent" style="background-color: lightgray; width:200px; height:100px; ">
			<div class="child" style="background-color: lightblue;">margin + vertical-align</div>
		</div>
	</div>

效果3：

4.绝对定位

【方式4】（1）绝对定位+margin: auto;（2）绝对定位+平移
（1）利用绝对定位元素的盒模型特性，在偏移属性为确定值的基础上，设置margin:auto

	<style>
		.f14 .parent {
			position: relative;
		}
		.f14 .child {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			height: 100px;
			width: 160px;
			margin: auto;
		}
	</style>
	<div class="case-box f14" data-case="f14">
		<div class="parent" style="background-color: lightgray; width:400px; height:300px; ">
			<div class="child" style="background-color: lightblue;">绝对定位+margin: auto;</div>
		</div>
	</div>

效果4（1）

（2）利用绝对定位元素的偏移属性和translate()函数的自身偏移达到水平垂直居中的效果

	<style>
		.f15 .parent {
			position: relative;
		}
		.f15 .child {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	</style>
	<div class="case-box f15" data-case="f15">
		<div class="parent" style="background-color: lightgray; width:200px; height:100px; ">
			<div class="child" style="background-color: lightblue;">绝对定位+平移</div>
		</div>
	</div>

效果4（2）

5.display: flex;

【方式5】（1）在伸缩项目上使用margin:auto（2）在伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items
（1）在伸缩项目上使用margin:auto

	<style>
		.f16 .parent {
			display: flex;
		}

		.f16 .child {
			margin: auto;
		}
	</style>
	<div class="case-box f16" data-case="f16">
		<div class="parent" style="background-color: lightgray; width:200px; height:100px; ">
			<div class="child" style="background-color: lightblue;">flex+margin: auto;</div>
		</div>
	</div>

效果5（1）：

（2）在伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items

	<style>
		.f17 .parent {
			display: flex;
			justify-content: center;
			align-items: center;
		}
	</style>
	<div class="case-box f17" data-case="f17">
		<div class="parent" style="background-color: lightgray; width:400px; height:200px; ">
			<div class="child" style="background-color: lightblue;">flex+justify-content+align-items</div>
		</div>
	</div>

效果5（2）：

6.grid

【方式6】（1）在网格项目中设置justify-self、align-self或者margin: auto（2）在网格容器上设置justify-items、align-items或justify-content、align-content
（1）在网格项目中设置justify-self、align-self或者margin: auto

	<style>
		.f18 .parent {
			display: grid;
		}
		.f18 .child {
			align-self: center;
			justify-self: center;
		}
	</style>
	<div class="case-box f18" data-case="f18">
		<div class="parent" style="background-color: lightgray; width:200px; height:100px; ">
			<div class="child" style="background-color: lightblue;">grid+align-self+justify-self</div>
		</div>
	</div>

效果6（1）

（2）在网格容器上设置justify-items、align-items或justify-content、align-content

	<style>
		.f19 .parent {
			display: grid;
			align-content: center;
			justify-content: center;
		}
	</style>
	<div class="case-box f19" data-case="f19">
		<div class="parent" style="background-color: lightgray; width:400px; height:200px; ">
			<div class="child" style="background-color: lightblue;">grid+align-content+justify-content</div>
		</div>
	</div>

效果6（2）