css中垂直居中和水平居中及使用范围说明

准备面试的第二天，今天我们就聊聊面试中最容易出现的基础问题，行内元素和块级元素垂直居中和水平居中吧

总结

一、水平居中

方式	使用范围
text-align:center	行内元素
flex布局+justify-content:center	行内元素和块级元素
margin:0 auto	块级元素
position:absolute+left:50%+transform:translateX(-50%)	行内元素和块级元素

一、垂直居中

方式	使用范围
line-height	行内元素
flex布局+align-items:center	行内元素和块级元素及
display:table+display:table-cell+vertical-align:middle	行内元素
position:absolute+top:50%+transform:translateY(-50%)	行内元素和块级元素

详解

一.水平居中

1、text-align: center;

• 只支持行内元素的水平居中方式，对块级元素无效
• 只能让子标签获得居中的属性，自身不具有

<style type="text/css">
	.app{
		width: 100px;
		height: 100px;
		border: 1px solid #000000;
		text-align: center;
	}
	.app .text{
		/* text-align: center; 如果把上面的这句移下来居中失效*/
	}
</style>

<div class="app">
	<a class="text">123123</a>
</div>

2、margin: 0 auto；

• 只支持块级元素的水平居中方式，对行内元素无效

<style type="text/css">
	.app{
		width: 100px;
		height: 100px;
		border: 1px solid #000000;
	}
	.app .wrap{
		width: 20px;
		height: 20px;
		border: 1px solid #FF0000;
		margin: 0 auto;
	}
</style>
<div class="app">
	<div class="wrap"></div>
</div>

3、使用flex布局+justify-content:center

• 行内元素和块级元素都支持
• IE10一下不支持flex布局

<style type="text/css">
	.app{
		display: flex;
		width: 100px;
		height: 100px;
		border: 1px solid #000000;
		justify-content: center;
	}
	.app .wrap{
		width: 20px;
		height: 20px;
		border: 1px solid #FF0000;
	}
</style>
<div class="app">
	<div class="wrap"></div>
</div>

4、position:absolute;+left:50%;+transform:translateX(-50%);

• 行内元素和块级元素都支持

<style type="text/css">
	.app{
		position: relative;
		width: 100px;
		height: 100px;
		border: 1px solid #000000;
	}
	.app .wrap{
		position: absolute;
		width: 20px;
		height: 20px;
		border: 1px solid #FF0000;
	}
</style>
<div class="app">
	<div class="wrap"></div>
</div>

二.垂直居中

1、line-height与height值相等

• 只适用于行内元素垂直居中，块级元素无效

<style type="text/css">
	.app{
		width: 100px;
		height: 100px;
		line-height: 100px;
		border: 1px solid #000000;
	}
</style>
<div class="app">
	<a class="text">123123</a>
</div>

2、position:absolute;+top:50%;+transform:translateY(-50%);

• 适用于行内元素和块级元素

<style type="text/css">
	.app{
		position: relative;
		width: 100px;
		height: 100px;
		border: 1px solid #000000;
	}
	.app .wrap{
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 20px;
		height: 20px;
		border: 1px solid #FF0000;
	}
</style>
<div class="app">
	<div class="wrap"></div>
</div>

3、flex布局 align-items:center;

*适用于行内元素和块级元素

<style type="text/css">
	.app{
		display: flex;
		align-items: center;
		width: 100px;
		height: 100px;
		border: 1px solid #000000;
	}
	.app .wrap{
		width: 20px;
		height: 20px;
		border: 1px solid #FF0000;
	}
	.app .text{
		
	}
</style>
<div class="app">
	<div class="wrap"></div>
</div>

4、display:table;+display:table-cell;+vertical-align:middle;

• 只适用于行内元素，不适用于块级元素

<style type="text/css">
	.app{
		display: table;
		width: 100px;
		height: 100px;
		border: 1px solid #000000;
	}
	.app .text{
		display: table-cell;
		vertical-align: middle;
	}
</style>
<div class="app">
	<a class="text">123123</a>
</div>