HTML-盒子水平居中

最新推荐文章于 2023-07-05 22:37:31 发布

weixin_43312083

最新推荐文章于 2023-07-05 22:37:31 发布

阅读量3.4w

点赞数 10

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/weixin_43312083/article/details/98780859

前端专栏收录该内容

85 篇文章

订阅专栏

外边距实现盒子居中

可以让一个盒子实现水平居中，需要满足一下两个条件：

必须是块级元素。
盒子必须指定了宽度（width）

然后就给左右的外边距都设置为auto，就可使块级元素水平居中。

实际工作中常用这种方式进行网页布局，示例代码如下：

.header{ width:960px; margin:0 auto;}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	div {
		text-align: center; /*可以让盒子内容（文字 行内元素 行内块元素）居中对齐*/
		width: 300px;
		height: 100px;
		background-color: pink;
		 /* margin: 0 auto; 通俗写法 0 auto  上下是 0  左右是auto  自动  水平居中对齐 */
		 /* margin-left: auto;
		 margin-right: auto; 自动充满*/
		 /* margin: auto; 上下左右都是auto*/
		 margin: 100px auto;

	}
	</style>
</head>
<body>
	<div>
		认识一周了
	</div>
</body>
</html>

浏览器显示结果

文字水平居中是 text-align: center
盒子水平居中左右margin 改为 auto

1. 文字水平居中是  text-align: center
2. 盒子水平居中  左右margin 改为 auto 

text-align: center; /*  文字居中水平 */
margin: 10px auto;  /* 盒子水平居中  左右margin 改为 auto 就阔以了 */