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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_36818627/article/details/82287494

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

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等方式...

展开阅读全文

没有更多推荐了,返回首页