【CSS3】水平垂直居中 -webkit-box

最新推荐文章于 2023-05-08 23:46:33 发布

原创最新推荐文章于 2023-05-08 23:46:33 发布 · 3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #CSS3 #水平垂直居中 #-webkit-box #displaybox

CSS 专栏收录该内容

4 篇文章

订阅专栏

本文通过实例代码介绍了CSS3使用-webkit-box实现水平垂直居中的方法，包括理解-webkit-box-flex的用法，块元素垂直居中以及包含文字的块元素垂直居中的实现，有助于理解和应用CSS3布局技巧。

我把干货都放在了代码里，说明全在注释上，希望可以帮到有需要的人。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		html,body{
			width: 100%;
			height:100%;
		}
		/*理解-webkit-box-flex的用法*/
		.parent1{
			/*首先定义父元素display:-webkit-box; 这个属性必须给父元素，所有的属性都是用来控制子元素的*/
			display: -webkit-box;				
    		-webkit-box-pack: center;				/*让元素水平居中，还有其他属性，官方文档有解释*/
   		 	-webkit-box-align: center;				/*让元素垂直居中，包含其他属性，官方文档有解释*/
    		margin: 0 auto;
    		width: 100%;
    		height: 100%;
		}
		.child1{
			display: -webkit-box;
    		-webkit-box-pack: center;				
   		 	-webkit-box-align: center;				
			background-color: red;
			-webkit-box-flex:1;						
			/*box-flex里面可以添加任意数字包括小数，可以让整个子元素针对父元素的宽度按百分比例进行划分*/
		}
		.child2{
			display: -webkit-box;
    		-webkit-box-pack: center;
   		 	-webkit-box-align: center;
			background-color: #ddd;
			-webkit-box-flex:2;
		}
		.child3{
			display: -webkit-box;
    		-webkit-box-pack: center;
   		 	-webkit-box-align: center;
			background-color: #ddd;
			-webkit-box-flex:3;
		}
		.child4{
			display: -webkit-box;
    		-webkit-box-pack: center;
   		 	-webkit-box-align: center;
			background-color: #ddd;
			-webkit-box-flex:4;
		}


		/*让子元素水平垂直居中*/
		/*为了浏览器兼容，所以将代码补全*/
		.parent2{
			width:100%;
			height:100%;
			display: -webkit-box;
			display:box;
			display: -o-box;
			display:-moz-box;
			box-pack:center;
			-webkit-box-pack:center;
			-o-box-pack:center;
			-moz-box-pack:center;
			box-align:center;
			-webkit-box-align:center;
			-o-box-align:center;
			-moz-box-align:center;
		}
		/*没有文字的DIV*/
		.child5{
			width: 200px;
			height:200px;
			background-color:#eee;
		}


		/*有文字的DIV*/
		/*如果希望里面的文字居中，就在里面再加一个div，将文字写在div里*/
		.parent3{
			width:100%;
			height:100%;
			display: -webkit-box;
			display:box;
			display: -o-box;
			display:-moz-box;
			box-pack:center;
			-webkit-box-pack:center;
			-o-box-pack:center;
			-moz-box-pack:center;
			box-align:center;
			-webkit-box-align:center;
			-o-box-align:center;
			-moz-box-align:center;
		}
		.child6{
			width: 200px;
			height:200px;
			display: -webkit-box;
			display:box;
			display: -o-box;
			display:-moz-box;
			background-color:#eee;
			box-pack:center;
			-webkit-box-pack:center;
			-o-box-pack:center;
			-moz-box-pack:center;
			box-align:center;
			-webkit-box-align:center;
			-o-box-align:center;
			-moz-box-align:center;
		}
	</style>
</head>
<body>
	<!-- 理解box-flex -->
	<div class="parent1">
		<div class="child1">1</div>
		<div class="child2">2</div>
		<div class="child3">3</div>
		<div class="child4">4</div>
	</div>
	<!-- 块元素垂直居中 -->
	<div class="parent2">
		<div class="child5">

		</div>
	</div>
	<!-- 块元素里包含文字垂直居中 -->
	<div class="parent3">
		<div class="child6">
			<div>1</div>
		</div>
	</div>
</body>
</html>

display：box属性还是很好用的。有需要的拿走吧。