html5文本/块级居中问题

蔚一

已于 2024-08-25 10:40:05 修改

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： html html5 javascript css css3

于 2021-01-25 19:34:12 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_54555405/article/details/113131496

本文详细介绍了在HTML5中实现文本及块级元素居中的多种方法，包括利用line-height、table属性、flex布局等技术手段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文本居中

单行文本居中一
设置line-height=height，如下代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
			.wrap{
				width: 300px;
				height: 300px;
				margin: 20px auto;
				border: 1px solid red;
				/*让line-height=height即可*/
				line-height: 300px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<p>ni hao wei duo ke</p>
		</div>
	</body>
</html>

单行文本居中二
（同时也适用于多行文本居中）
让父元素有table属性，子元素设置display: table-cell;
vertical-align: middle;缺一不可，如下代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
			.wrap{
				/*让父元素有table属性;*/
				display: table;
				width: 300px;
				height: 300px;
				margin: 20px auto;
				border: 1px solid red;
				text-align: center;
			}
			p{
				/*子元素如下，缺一不可*/
				display: table-cell;
				vertical-align: middle;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<p>ni hao wei duo ke</p>
			<!-- 
			<p>ni hao wei duo ke</p>
			<p>ni hao wei duo ke</p>
			<p>ni hao wei duo ke</p>
			<p>ni hao wei duo ke</p>
			<p>ni hao wei duo ke</p>
			 -->
		</div>
	</body>
</html>

多行文本居中
巧用span占位作用，如下代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
			.wrap{
				width: 300px;
				height: 300px;
				margin: 20px auto;
				border: 1px solid red;
				text-align: center;
			}
			p{
				display: inline-block;
				vertical-align: middle;
			}
			/*span占位作用*/
			span{
				display: inline-block;
				height:100%;
				border: 1px solid #000;
				vertical-align: middle;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<p>ni hao wei duo ke<br/>
			   ni hao wei duo ke<br/>
			   ni hao wei duo ke
			</p>
			<!-- span不能省略 -->
			<span></span>
		</div>
	</body>
</html>

块级居中

子绝父相，加top,left,margin;如下代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		 .father{
			 /*相对定位*/
			 position: relative;
			 width: 300px;
			 height: 300px;
			 margin: 50px auto;
			 background-color: #000000;
		 }
		 .son{
			 position: absolute; /*绝对定位*/
			 width: 100px;
			 height: 100px;
		 /*top,left设置必不可少*/
			 top: 50%;
			 left: 50%;
 /*margin的属性设置此时为该块级宽高的负一半，如下*/
			 margin: -50px 0 0 -50px;
			 background-color:red;
		 }
		</style>
	</head>
	<body>
		<div class="father">
			<div class="son"></div>
		</div>
	</body>
</html>

子绝父相，加top,left,bottom,right为零，还有margin=auto，如下代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		 .father{
		    /*父，相对定位*/
			 position: relative;
			 width: 300px;
			 height: 300px;
			 margin: 50px auto;
			 background-color: #000000;
		 }
		 .son{
			 /*子，绝对定位*/
			 position: absolute;
		/*top,left, right,bottom为0px*/
			 top: 0px;
			 left:0px;
			 bottom: 0px;
			 right: 0px;
		  /*margin不可少*/
			 margin: auto;
			 width: 100px;
			 height: 100px;
			 background-color:red;
		 }
		</style>
	</head>
	<body>
		<div class="father">
			<div class="son"></div>
		</div>
	</body>
</html>

用box-sizing属性加padding，如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		 .father{
			 width: 300px;
			 height: 300px;
/*padding(父width300-子width100)/2=100px*/
			 padding: 100px;
		/*设置box-sizing属性*/
			 box-sizing: border-box;
			 margin: 50px auto;
			 background-color: #000000;
		 }
		 .son{
			 width: 100px;
			 height: 100px;
			 background-color:red;
		 }
		</style>
	</head>
	<body>
		<div class="father">
			<div class="son"></div>
		</div>
	</body>
</html>

用占位盒子设置居中，如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		 .father{
		    /*父，相对定位*/
			 position: relative;
			 width: 300px;
			 height: 300px;
			 margin: 50px auto;
			 background-color: #000000;
		 }
		.floater{
			 float: left;
			 width: 100%;
			 height: 50%;
			/*设置为子元素高的负一半*/
			 margin-bottom: -50px;
			 border: 1px solid #FFFFFF;
		 }
		 .son{
			clear: both;
			 width: 100px;
			 height: 100px;
		  /*此时margin设置水平居中*/
			 margin: 0 auto;
			 background-color:red;
		 }
		</style>
	</head>
	<body>
		<div class="father">
			<!--floater盒子占位作用 -->
			<div class="floater"></div>
			<div class="son"></div>
		</div>
	</body>
</html>

父元素设置用display,justify-content,align-items来居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		 .father{
/*用display,justify-content,align-items设置居中*/
		     display: flex;
			 justify-content: center;
			 align-items: center;
			 width: 300px;
			 height: 300px;
			 margin: 50px auto;
			 background-color: #000000;
		 }
		 .son{
			 width: 100px;
			 height: 100px;
			 background-color:red;
		 }
		</style>
	</head>
	<body>
		<div class="father">
			<div class="son"></div>
		</div>
	</body>
</html>

（图片在盒子内居中）
设置 line-height，text-align: center, vertical-align: middle，如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		 .father{
			 width: 300px;
			 height: 300px;
			 margin: 50px auto;
			 border:1px solid red;
		  /*设置line-height=hight,
		    还有 text-align: center;*/
			 line-height: 300px;	
			 text-align: center;
		 }
		 img{
			 width: 100px;
			 height: 100px;
			 vertical-align: middle;
		 }
		</style>
	</head>
	<body>
		<div class="father">
			<img src="img/1.png" >
		</div>
	</body>
</html>