Skip to content

水平垂直居中常见方法

文本垂直居中

设置 text-align: center

元素垂直居中

利用 calc

使用 absolute 定位,已知盒子自身宽高,利用 calc 计算偏移量进行定位。

css
  div {
    position: absolute;
    width: 200px;
    height: 400px;
    left: calc((100% - 200px) / 2);
    top: calc((100% - 400px) / 2);
    background: yellowgreen;
  }

利用 margin-auto

使用 absolute 定位,已知盒子自身宽高,给定四个方向的定位为 0,利用 margin 定位。

css
  div {
    width: 200px;
    height: 400px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background: skyblue;
  }

利用 margin 负值

使用 absolute 定位,已知盒子自身宽高,给定 topleft50%,将 margin 的对应方向的负值设为其一半来定位。

css
  div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 300px;
    margin-top: -150px;
    margin-left: -100px;
    background: red;
  }

利用 transform

使用 absolutereleative 定位,已知盒子自身宽高,给定 topleft50%,设置 transformtranslate(-50%, -50%) 来定位。

css
  div {
    position: absolute;
    width: 200px;
    height: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: pink;
  }

利用 flex 布局

设置父元素容器为 flex 布局,同时设置 align-items: centerjustify-content: center,给定 height 撑满整个视图;子元素盒子可不设置长宽。

css
  .container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
  }

  .container div {
    width: 200px;
    height: 300px;
    background-color: greenyellow;
  }

利用 table-cell 布局

设置父元素容器为 table-cell 布局,同时设置 verical-align: middletext-align: center,给定长宽;设置子元素为 inline-block,亦需给定长宽。

css
  .container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 500px;
    height: 400px;
    background: pink;
  }

  .container div {
    width: 200px;
    height: 300px;
    background: skyblue;
    display: inline-block;
  }

Released under the MIT License.