limanting 的个人博客

将居中方法分为两类。已知元素宽高和未知元素宽高。

已知居中元素宽高：

position：absolute+（margin/calc）

子元素上设置。

    position: absolute;;
    top: 50%;
    left: 50%;
    margin-left: -50px;（已知元素宽高各100px）
    margin-top: -50px;

同

    position: absolute;;
    top: calc(50% - 50px);
    left: calc(50% - 50px);

不知居中元素宽和高或不定宽高：

position（ablsoute）+transform

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

position（ablsoute）+margin: auto

    position: absolute;;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;

line-height

把box设置为行内元素，通过 text-align就可以做到水平居中(在父元素中设置text-align ： center)，vertical-align在垂直方向做到居中

    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    line-height: initial;
    text-align: left; /* 修正文字 */

flex

在父元素上设置

    display: flex;
    justify-content: center;
    align-items: center;