css使用box-align和box-pack使div的子元素垂直居中

最新推荐文章于 2023-09-01 22:20:06 发布

原创最新推荐文章于 2023-09-01 22:20:06 发布 · 573 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种使用CSS属性box-align和box-pack实现内容垂直居中的方法。通过设置display属性为-webkit-box或-moz-box，并结合box-align:center与box-pack:center，可以轻松地使子元素在父容器内垂直居中。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>box-align和box-pack是内容垂直居中</title>
<meta name="author" content="suixinMLF" />
<style>
.centent{
	width:300px;
	height:200px;
	border:1px solid #ebebeb;
	display:-webkit-box;
	display:-moz-box;
	-webkit-box-align:center;
	-moz-box-align:center;
	box-align:center;
	-webkit-box-pack:center;
	-moz-box-pack:center;
	box-pack:center;
}
</style>
</head>
<body>
<div class="centent">让子元素垂直居中</div>
</body>
</html>