css实现垂直居中的12种方法，用起来666

最新推荐文章于 2024-09-24 17:14:12 发布

敲出真谛

最新推荐文章于 2024-09-24 17:14:12 发布

阅读量601

点赞数 1

分类专栏： css 文章标签：垂直居中

本文链接：https://blog.csdn.net/qq_36818627/article/details/82287494

版权

css 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

今天利用周末整理了一下垂直居中的问题，这也是在平时的开发中用的较多的技术栈。

1.单行文字的垂直居中

原理：利用行高等于盒子的高来实现

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.content {
				width: 400px;
				height: 100px;
				background: #ccc;
				line-height: 100px;
				text-align: center;
				
			}
		</style>
	</head>

	<body>
		<div class="content">Hello World</div>
	</body>
</html>

2.多行文本居中

原理：子盒子设置为display：inline-block，利用line-height代替height

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			h2 {
				text-align: center;
			}
			
			.box {
				width: 500px;
				border: 1px solid #f00;
				margin: auto;
				line-height: 200px;
				text-align: center;
			}
			
			.box2 .content {
				display: inline-block;
				height: auto;
				line-height: 1;
				width: 400px;
				background: #ccc;
			}
		</style>
	</head>

	<body>
		<div class="box box2">
			<div class="content">
				好多新鲜的内容，尽在 <a href="https://blog.csdn.net/qq_36818627">
      CSDN    </a> 记得点赞吆！ 當然若有不对之处还请多批评指正,留下足迹，定会虚心请教。</div>
	</body>

</html>

3.多行文本居中

原理：利用:before伪类元素设定为100%高的inline-block，再搭配上将需要居中的子元素同样设置成inline-block性质后，就能使用vertical-align:middle来达到垂直居中的目的了

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			h2 {
				text-align: center;
			}
			
			.box {
				width: 500px;
				height: 250px;
				border: 1px solid #f00;
				margin: auto;
				text-align: center;
			}
			
			.box::before {
				content: '';
				display: inline-block;
				height: 100%;
				width: 0;
				vertical-align: middle;
			}
			
			.box .content {
				width: 400px;
				background: #ccc;
				display: inline-block;
				vertical-align: middle;
			}
		</style>
	</head>

	<body>
        <h2> :before + vertical-align</h2>
		<div class="box">
			<div class="content">
				好多新鲜的内容，尽在 <a href="https://blog.csdn.net/qq_36818627">
      CSDN    </a> 记得点赞吆！ 當然若有不对之处还请多批评指正,留下足迹，定会虚心请教。</div>
		</div>
	</body>

</html>

4.多行文本居中

原理：子绝父相和 top：50% left：50% 加上 margin的一半的负值，这个在平时用的还是挺多的。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			h2 {
				text-align: center;
			}
			
			.box {
				width: 500px;
				height: 250px;
				border: 1px solid #f00;
				margin: auto;
				position: relative;
			}
			
			.box4 .content {
				width: 400px;
				background: #ccc;
				height: 70px;
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -200px;
				margin-top: -35px;
			}
		</style>
	</head>

	<body>
		<h2>4.absolute + margin负值的一半</h2>
		<div class="box box4">
			<div class="content">
				好多新鲜的内容，尽在 <a href="https://blog.csdn.net/qq_36818627">
      CSDN    </a> 记得点赞吆！ 當然若有不对之处还请多批评指正,留下足迹，定会虚心请教。</div>
		</div>
	</body>

</html>

5.多行文本居中

原理：子绝父相和margin auto实现。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			h2 {
				text-align: center;
			}
			
			.box {
				width: 500px;
				height: 250px;
				border: 1px solid #f00;
				margin: auto;
				position: relative;
			}
			
			.content {
				width: 400px;
				background: #ccc;
				height: 70px;
				position: absolute;
				top:0;
				left:0;
				margin: auto;
			}
		</style>
	</head>

	<body>
		<h2>5.absolute + margin auto</h2>
		<div class="box box4">
			<div class="content">
				好多新鲜的内容，尽在 <a href="https://blog.csdn.net/qq_36818627">
      CSDN    </a> 记得点赞吆！ 當然若有不对之处还请多批评指正,留下足迹，定会虚心请教。</div>
		</div>
	</body>

</html>

6.多行文本居中

原理：利用绝对定位时的top 与right设置元素的上方跟左方各为50%，再利用translate(-50%,-50%)位移居中元素自身宽与高的50%就能达成居中的目的了

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			h2 {
				text-align: center;
			}
			
			.box {
				width: 500px;
				height: 250px;
				border: 1px solid #f00;
				margin: auto;
				position: relative;
			}
			
			.box5 .content {
				width: 400px;
				background: #ccc;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		</style>
	</head>

	<body>
		<h2>6.absolute + transform</h2>
		<div class="box box5">
			<div class="content">
				好多新鲜的内容，尽在 <a href="https://blog.csdn.net/qq_36818627">
      CSDN    </a> 记得点赞吆！ 當然若有不对之处还请多批评指正,留下足迹，定会虚心请教。</div>
		</div>
	</body>

</html>

7.多行文本的居中加盒子居中

原理：不为元素设置宽度，利用padding 和margin：0 auto来实现，这个技巧用起来也是666.

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			
			h2 {
				text-align: center;
			}
			
			.box {
				width: 500px;
				padding: 50px 0;
				border: 1px solid #f00;
				margin: auto;
			}
			
			.content {
				width: 300px;
				padding: 20px;
				text-align: center;
				line-height: 28px;
				background-color: #ccc;
				margin: 0 auto;
			}
		</style>
	</head>

	<body>
		<h2>7.padding + margin</h2>
		<div class="box">
			<div class="content">
				好多新鲜的内容，尽在 <a href="https://blog.csdn.net/qq_36818627">
      CSDN    </a> 记得点赞吆！ 當然若有不对之处还请多批评指正,留下足迹，定会虚心请教。</div>
		</div>
	</body>

</html>

8.多行文本居中

原理：父层display:flex以及设定次轴(cross axis)属性align-items:center

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			h2 {
				text-align: center;
			}
			
			.box {
				width: 500px;
				height: 250px;
				border: 1px solid #f00;
				margin: auto;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			
			.content {
				width: 400px;
				background: #ccc;
			}
		</style>
	</head>

	<body>
		<h2>8.flex + align-items</h2>
		<div class="box box7">
			<div class="content">
				好多新鲜的内容，尽在 <a href="https://blog.csdn.net/qq_36818627">
      CSDN    </a> 记得点赞吆！ 當然若有不对之处还请多批评指正,留下足迹，定会虚心请教。</div>
		</div>
	</body>

</html>

9.多行文本居中

原理：flex-direction:column直式排法，搭配:before伪元素适用flex-grow伸展

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			h2 {
				text-align: center;
			}
			
			.box {
				width: 500px;
				height: 250px;
				border: 1px solid #f00;
				margin: auto;
				display: flex;
				/*flex-direction: row;*/
				align-items: center;
			}
			
			.box:before {
				content: '';
				flex-grow: .5;
			}
			
			.content {
				width: 400px;
				background: #ccc;
			}
		</style>
	</head>

	<body>
		<h2>9.Flex + :before + flex-grow</h2>
		<div class="box box7">
			<div class="content">
				好多新鲜的内容，尽在 <a href="https://blog.csdn.net/qq_36818627">
      CSDN    </a> 记得点赞吆！ 當然若有不对之处还请多批评指正,留下足迹，定会虚心请教。</div>
		</div>
	</body>

</html>

10 .多行文本居中

原理：父层元素设定display:flex，接着在需要垂直居中的元素上设定margin:auto，即可自动居中

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			h2 {
				text-align: center;
			}
			
			.box {
				width: 500px;
				height: 250px;
				border: 1px solid #f00;
				margin: auto;
				display: flex;
			}
			
			.content {
				width: 400px;
				background: #ccc;
				margin: auto;
			}
		</style>
	</head>

	<body>
		<h2>10.Flex + margin</h2>
		<div class="box box7">
			<div class="content">
				好多新鲜的内容，尽在 <a href="https://blog.csdn.net/qq_36818627">
      CSDN    </a> 记得点赞吆！ 當然若有不对之处还请多批评指正,留下足迹，定会虚心请教。</div>
		</div>
	</body>

</html>

11.多行文本居中

原理：父级设置为伸缩布局，对子元素的次轴设置align-self:center

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			h2 {
				text-align: center;
			}
			
			.box {
				width: 500px;
				height: 250px;
				border: 1px solid #f00;
				margin: auto;
				display: flex;
				justify-content: center;
			}
			
			.content {
				width: 400px;
				background: #ccc;
				align-self: center;
			}
		</style>
	</head>

	<body>
		<h2>11.Flex + align-self</h2>
		<div class="box box7">
			<div class="content">
				好多新鲜的内容，尽在 <a href="https://blog.csdn.net/qq_36818627">
      CSDN    </a> 记得点赞吆！ 當然若有不对之处还请多批评指正,留下足迹，定会虚心请教。</div>
		</div>
	</body>

</html>

12 .多行文本居中

原理：在正常的状况下，align-content 仅能对次轴多行flex item做居中，但是当我今天子层元素不确定有多少个时，且有时可能会有单个的情况出现时，此技巧就能用到了（当然你也能有其他解法），既然是多行子元素才能用，那我们就为单个子组件多加两个兄弟吧，使用:before以及:after 来让子元素增加到多个，这样就能使用flex的align-content属性来居中

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			h2 {
				text-align: center;
			}
			
			.box {
				width: 500px;
				height: 250px;
				border: 1px solid #f00;
				margin: auto;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-content: center;
			}
			
			.content {
				width: 400px;
				background: #ccc;
			}
			
			.box11:before,
			.box11:after{
				content: '';
				display: block;
				width: 100%;
			}
		</style>
	</head>

	<body>
		<h2>12.Flex + align-content</h2>
		<div class="box box11">
			<div class="content">
				好多新鲜的内容，尽在 <a href="https://blog.csdn.net/qq_36818627">
      CSDN    </a> 记得点赞吆！ 當然若有不对之处还请多批评指正,留下足迹，定会虚心请教。</div>
		</div>
	</body>

</html>

当然使盒子居中的方法不止这些，上面仅仅是我所接触到的，随着知识的累积，慢慢再完善！比如Grid布局、cale等方式...