hailiting Blog

# 实现上下左右居中布局

# flex

<style>
  html,
  body {
    width: 100%;
    height: 100%;
  }
  #container {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }
  #center {
    width: 100px;
    height: 100px;
    outline: solid 1px;
  }
</style>
<div id="container">
  <div id="center">center</div>
</div>

# margin

<html>
  <head>
    <style>
      .automargin {
        --ydUnit: 500px;
        width: var(--ydUnit);
        height: var(--ydUnit);
        border: 1px solid yellowgreen;
        display: flex;
      }
      .automargin .child {
        margin: auto;
      }
      .child {
        --child: 200px;
        width: var(--child);
        height: var(--child);
        background-color: 1px solid #eee;
      }
    </style>
  </head>
  <body>
    <div class="automargin">
      <div class="child"></div>
    </div>
  </body>
</html>

# display: table

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .table {
      display: table;
      width: 100%;
    }
    .father {
      display: table-cell;
      vertical-align: middle;
      width: 100%;
      height: 400px;
      border: 1px solid rebeccapurple;
    }
    .son {
      margin: auto;
      width: 100px;
      height: 100px;
      background: palegreen;
    }
    .son02 {
      margin: auto;
      width: 100px;
      height: 200px;
      background: #f00;
    }
  </style>
  <div class="table">
    <div class="father">
      <div class="son"></div>
      <div class="son02"></div>
    </div>
  </div>
</html>

# display: inline-block

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html,
  body {
    height: 100%;
  }

  .father {
    height: 100%;
    text-align: center;
  }

  .father:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }

  .son {
    width: 100px;
    height: 100px;
    background-color: #f00;
    display: inline-block;
    vertical-align: middle;
  }
</style>

<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>

# 定位 01

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .father {
    position: relative;
    width: 100%;
    height: 400px;
    border: 1px solid rebeccapurple;
  }

  .son {
    position: absolute;
    bottom: 50%;
    margin-bottom: -50px;
    left: 50%;
    margin-left: -50px;
    width: 100px;
    height: 100px;
    background: palegreen;
  }
</style>

<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>

# 定位 02

<style>
  * {
    margin: 0;
    padding: 0;
  }

  .father {
    position: relative;
    width: 100%;
    height: 400px;
    border: 1px solid rebeccapurple;
  }

  .son {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100px;
    height: 100px;
    background: palegreen;
  }
</style>

<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>

← 消除不同浏览器的默认样式 →