CSS 垂直居中

前言

被这个问题折磨很久了，一直没有系统的整理，今天就系统的整理一下比较常用的，以后回顾的时候也可以参照

1. line-height

适用场景：单行文字，下拉框，按钮等

原理：将单行文字设置行高以后，文字会位于行高的中间位置。也就是需要将元素的 line-height 设置成和高度一样。

示例如下

	<style>
		.content{
		  width: 400px;
		  background: #ccc;
		  line-height:100px; /* 垂直居中 */
		  text-align: center; /* 水平居中 */
		}
	</style>
	<div class="content">我居中了</div>
复制代码

2. line-heigh + inline-block

既然单行可以做到垂直居中，那么多行肯定也是可以的

适用场景：多对象的垂直居中

原理：在要居中的对象外面包裹一层，将它们整个的 display 设置为 inline-block 模仿行内元素。但是包裹对象的内部还是以块级元素的形式存在。

示例如下

	<style>
	.main{
		width: 400px;
		border: 1px solid red; 
		line-height: 200px;
		text-align: center; /* 水平居中 */
	}
	.wrapper{
		line-height: 1;
		display: inline-block;	
	}
	</style>
	
	<div class="main">
		<div class="wrapper">
			<div>我居中了</div>
			<div>我也是</div>
		</div>		
	</div>
复制代码

3. absolute + margin 负值

这个应该是最常见的居中方式了

适用场景：多行文字的垂直居中，已知宽高

原理：利用绝对定位 top 和 left 50%，然后减去元素本身内容区的一半，就可以实现居中

示例如下

	<style>
	.main{
		border: solid 1px red;
		width: 400px;
		height: 400px;
		position: relative
	}
	.content{
		height: 200px;
		width: 200px;
		background-color: yellow;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -100px;
		margin-top: -100px;
	}
	</style>
        <div class="main">
		<div class="content">
		</div>
	</div>
复制代码

4. absolute + margin：auto

适用场景：多行文字垂直居中

原理：这种方法跟上面的有些类似，但是这里是通过 margin:auto 和 top,left,right,bottom 都设置为 0 实现居中。不过这里得确定内部元素的高度，可以用百分比，比较适合移动端。

示例如下

	<style>
	.main{
		border: solid 1px red;
		width: 400px;
		height: 400px;
		position: relative;
	}
	.content{
		position: absolute;
		background-color: yellow;
		width: 200px;
		height: 100px;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}
	</style>
	<div class="main">
		<div class="content"></div>
	</div>

复制代码

这里需要注意设置父元素的 position 必须是 relative 或者 absolute 或者 fixed

5. Flex + align-items

适用场景：多对象垂直居中

原理：Flex 布局 align-items 垂直居中，justify-content 水平居中

示例如下

	<style>
	.main{
		border: solid 1px red;
		width: 400px;
		height: 400px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	</style>
	<div class="main">
		<div>我居中了</div>
		<div>我也居中了</div>
	</div>

复制代码

6. display：table-cell

适用场景：多行文字的垂直居中技巧

原理：利用 display 将 div 设置成表格的单元格，然后利用 veritical-align 实现垂直居中

示例如下

	<style>
	.main{
		border: solid 1px red;
		width: 400px;
		height: 400px;
		display: table-cell;
		vertical-align: middle;
		text-align: center;
	}
	</style>
	<div class="main">
		<div>我居中了</div>
	</div>
复制代码

7. translate + absolute

这种方法和方法三类似

适用场景：多行文字垂直居中

原理：利用绝对定位 top 和 left 50%，然后减去元素本身内容区的一半，就可以实现居中

示例如下

	<style>
	.main{
		border: solid 1px red;
		width: 400px;
		height: 400px;
		position: fixed;
	}
	.content{
		position: absolute;
		background-color: yellow;
		width: 200px;
		height: 100px;
		transform: translate(-50%, -50%);
		top:50%;
		left: 50%;
	}
	</style>
	<div class="main">
		<div class="content"></div>
	</div>
复制代码

8. :before + inline-block

适用场景：多对象垂直居中

原理：利用 :before 伪类元素设定为 100% 高的 inline-block，再搭配上将需要居中的子元素同样设置成 inline-block 性质后，就能使用 vertical-align:middle 来达到垂直居中的目的了，该方法需要注意去掉 inline-block 元素之间的 4-5px 小空隙。

示例如下

	<style>
	.main{
		border: solid 1px red;
		width: 400px;
		height: 400px;
		text-align: center;
	}
	.main::before{
		content: "";
		height: 100%;
		display: inline-block;
		vertical-align: middle;
		width: 0;
	}
	.content{
		background-color: yellow;
		width: 200px;
		height: 100px;
		display: inline-block;
		vertical-align: middle;
	}
	</style>
	<div class="main">
		<div class="content"></div>
	</div>
复制代码

参考文章

CSS垂直居中技巧，我只会23个，你会几个？

转载于:https://juejin.im/post/5b86643fe51d4538e6333b3f