8 css vertical and horizontal centering schemes

    Foreword: In the daily development of the front-end, usually mastering three or five solutions is enough to solve most of the vertical and horizontal centering needs. Therefore, this article is not used to deal with work requirements, and I hope that by throwing bricks and jade, I can explore the depth of CSS with everyone.

Here are a few ways I know of:

 1. Block-level elements

1. Positioning + margin: auto

<div class="box">你好，世界。</div>

<style type="text/css">
  .box {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }
</style>

    Note: Compatible to ie7. The width and height of the box need to be set, otherwise the box will fill the entire parent element or body.

2. Positioning + negative margin

<div class="box">你好，世界。</div>

<style type="text/css">
  .box {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
  }
</style>

    Note: Compatible to ie7. The fixed width and height of the box are required to calculate the margin.

3. Positioning + translate

<div class="box">你好，世界。</div>

<style type="text/css">
  .box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>

    Note: compatibility to ie10. No need to pay attention to the width and height of the box, it can be adaptive.

4. Positioning + calc

<div class="box">你好，世界。</div>

<style type="text/css">
  .box {
    width: 100px;
    height: 100px;
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
  }
</style>

    Note: compatibility to ie9. The fixed width and height of the box are required to calculate calc.

5、flex

<div class="parent">
  <div class="box">你好，世界。</div>
</div>

<style type="text/css">
  .parent {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
  }
</style>

    Note: compatibility to ie11. The parent element needs to be added. No need to pay attention to the width and height of the box, it can be adaptive. (When the width of the box exceeds the parent, it is necessary to deal with the collapse of the box content.)

2. Inline elements

1、text-align + vertical-align

<div class="parent">
  <div class="box">你好，世界。</div>
  <div class="after"></div>
</div>

<style type="text/css">
  .parent {
    height: 100vh;
    text-align: center;
  }
  .after{
    display: inline-block;
    *display: inline;
    *zoom: 1;
    height: 100%;
    vertical-align: middle;
  }
  .box{
    display: inline-block;
    *display: inline;
    *zoom: 1;
    vertical-align: middle;
  }
</style>

    Note: compatibility to ie4. Rely on sibling elements or pseudo-elements (pseudo-elements are compatible up to ie9). Both table and block-level elements are vertically and horizontally centered ancient magic.

2、text-align + line-height

<div class="parent">
  <span class="box">你好，世界。</span>
</div>

<style type="text/css">
  .parent {
    height: 100vh;
    line-height: 100vh;
    text-align: center;
  }
</style>

    Note: compatibility to ie4. Requires the height of the parent element, only valid for inline or inline block elements.

3. Form elements

1、Table + text-align

<div class="parent">
  <span class="box">你好，世界。</span>
</div>

<style type="text/css">
  .parent {
    display: table;
    width: 100vh;
    height: 100vh;
  }
  .box{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
</style>

    Note: compatibility to ie8.

2、Table + text-align

<Table>
  <tr>
    <td>你好，世界</td>
  </tr>
</Table>

<style type="text/css">
  Table {
    width: 100vh;
    height: 100vh;
    text-align: center;
  }
</style>

    Note: compatibility to ie3. Ancient magic! ! !