HTML-盒⼦⽔平居中外边距实现盒⼦居中
可以让⼀个盒⼦实现⽔平居中，需要满⾜⼀下两个条件：
1. 必须是块级元素。
2. 盒⼦必须指定了宽度（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;
html怎么让所有内容居中margin-right: auto; ⾃动充满*/
/* margin: auto; 上下左右都是auto*/
margin: 100px auto;
}
</style>
</head>
<body>
<div>
认识⼀周了
</div>
</body>
</html>
浏览器显⽰结果
1. ⽂字⽔平居中是 text-align: center
2. 盒⼦⽔平居中 左右margin 改为 auto
1. ⽂字⽔平居中是  text-align: center
2. 盒⼦⽔平居中左右margin 改为 auto
text-align: center; /*  ⽂字居中⽔平 */
margin: 10px auto;  /* 盒⼦⽔平居中左右margin 改为 auto 就阔以了 */
1. 插⼊图⽚ 我们⽤的最多 ⽐如产品展⽰类
2. 背景图⽚我们⼀般⽤于⼩图标背景 或者 超⼤背景图⽚

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。