外边距典型应用-块级盒子水平居中

WinFang5

于 2021-09-27 14:33:09 发布

阅读量184

点赞数

分类专栏： Html5+Css3+移动Web_前端入门文章标签： css html html5

本文链接：https://blog.youkuaiyun.com/weixin_51061595/article/details/120507989

版权

Html5+Css3+移动Web_前端入门专栏收录该内容

23 篇文章

订阅专栏

外边距让块级盒子水平居中，必须满足两个条件：

盒子必须指定了 宽度（width）。
盒子 左右的外边距 都设置为 auto。

常见的写法，一下三中都可以：
● margin: 0 auto;(最常用）
● margin-left:auto; margin-right:auto;
● margin: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>Document</title>

  <style>
    .nav {
      width: 900px;
      height: 300px;
      background-color: blue;
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <div class="nav"></div>
</body>

</html>