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

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

  1. 盒子必须指定了 宽度(width)
  2. 盒子 左右的外边距 都设置为 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>Documenttitle>

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

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

html>

效果图
外边距典型应用-块级盒子水平居中_第1张图片

你可能感兴趣的:(css,html,html5)