提示:文章写完后,外边距可以让盒子水平居中。
1、语法:
div{
margin:“0 auto”;
}
解释:
必须有两个条件:
(1)、设置;宽高:width、heght
(2)、盒子左右的外边距设置为“auto”
常见三种写法:
1、margin-left:auto;margin-right:”auto“
2、margin:”auto“
3、margin:” 0 auto“;
解释:上下为0像素、左右为auto(水平居中)。
注意:必须是宽盒子
自己代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外边框居中</title>
<style>
div {
width: 900px;
height: 200px;
background-color: pink;
margin: 0 auto;
/* 这里margin表示外边距离:就是盒子与盒子之间的距离、auto表示固定 */
margin: 100px auto;
/* 这个表示100是上下距离100、auto表示固定左右 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
显示结果:
总结
提示:这里对文章进行总结:
例如:以上就是今天要讲的内容,本文仅仅简单介绍了外边距可以让盒子水平居中,用到margin:”0 auto“;。