元素的水平垂直居中

元素的水平垂直居中

行内元素
text-align:center;
line-hight:设置和父元素同高

	结构:
		<div class="outer">
			<span class="inner">居中显示</span>
	   </div>

样式:
	<style>
		.outer{
			width: 200px;
			height: 200px;
			background-color: pink;
			color: black;
			text-align: center;
			line-height: 200px;
		}
	</style>

块级元素
1.给父元素添加相对定位
给子元素添加绝对定位
子元素left right bottom top 都设置为0 且设置margin auto;

结构:
	<div class="outer">
		<div  class="inner"></div>
	</div>

样式:
	<style>
		.outer{
			width: 200px;
			height: 200px;
			background-color: pink;
			position: relative;
		}
		.inner{
			width: 100px;
			height: 100px;
			background-color: black;
			position: absolute;
			top: 0px;
			left: 0px;
			right: 0px;
			bottom: 0px;
			margin: auto;
		}
	</style>

2.给父元素绝对定位
子元素绝对定位
子元素设置 :left:25%;
top25%;
margin-left:50%减子元素宽一半;
margin-top:50%减子元素高一半;

结构:
	<div class="outer">
		<div  class="inner"></div>
	</div>

样式:
	<style>
		.outer{
			width: 200px;
			height: 200px;
			background-color: pink;
			position: absolute;
		}
		.inner{
			width: 100px;
			height: 100px;
			background-color: black;
			position: absolute;
			top:25%;
			left: 25%;
			margin-top: calc(50%-50px);
			margin-left: calc(50%-50px);
		}
	</style>

3.伸缩盒/弹性盒布局
为父元素设置
display: flex;
justify-content: space-around;
align-items: center;
这样也可以实现子元素在父元素里水平垂直居中

结构:
	<div class="outer">
		<div  class="inner"></div>
	</div>

样式:
	<style>
		.outer{
			width: 200px;
			height: 200px;
			background-color: pink;
			display: flex;
			justify-content:space-around;
			align-items: center;
		}
		.inner{
			width: 100px;
			height: 100px;
			background-color: black;
		}
	</style>

三者的显示结果同为: