【笔记】CSS居中布局方法

最新推荐文章于 2024-08-26 20:49:50 发布

二木成林

最新推荐文章于 2024-08-26 20:49:50 发布

阅读量176

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/cnds123321/article/details/85253037

版权

前端专栏收录该内容

10 篇文章 1 订阅

订阅专栏

文字水平和垂直居中的方法：

文字水平居中：

text-align:center;

文字垂直居中：

line-height:200px;
height:200px;
/*将line-height和height设置为一样的值。*/

代码示例：

<!DOCTYPE html>
<html>
<head>
	<title>文字的水平居中方法</title>
	<style type="text/css">
		.wrap {
			/*将line-height与height设置为一样高，使文字垂直居中。*/
			line-height: 200px;/*垂直居中关键*/
			height: 200px;
			text-align: center;/*水平居中关键*/
			background-color: #ccc;
		}
	</style>
</head>
<body>
	<div class="wrap">文字的水平居中方法</div>
</body>
</html>