三种居中

发表于 | 分类于 |
字数统计: 286 字 | 阅读时长 ≈ 1 分钟

水平居中方式

行内元素：text-align:center

块级元素

定宽：margin:0 auto；

不定宽：

  • 以文本对齐的方式

    1
    2
    text-align: center; // 父级元素设置
    display:inline-block; // 子元素设置为内嵌块元素

  • 定位法

    1
    2
    3
    4
    5
    6
    position: relative; // 父级元素设置
    position：absolute; // 子元素设置
    left: 50%;
    margin-left: -200px; //-自己宽度的一半；
    // 或者
    transform: translateX(-50%);

  • flex布局（ie8、ie9 不支持）

    1
    2
    display: flex; // 父元素
    justify-content: center;

垂直居中方式

块级元素

定宽：margin: auto 0；

不定宽：

  • 定位法

    1
    2
    3
    4
    5
    6
    position: relative; // 父级元素设置
    position：absolute; // 子元素设置
    top: 50%;
    margin-top: -200px; //-自己高度的一半；
    // 或者
    transform: translateY(-50%);

  • flex布局（ie8、ie9 不支持）

    1
    2
    display: flex; // 父元素
    align-items: center;

  • Table 布局

    1
    2
    3
    display: table; // 父元素
    display: table-cell; // 包裹元素的div
    vertical-align: middle； // 包裹元素的div

水平垂直居中方式

  • 定位法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    position: relative; // 父级元素设置
    position：absolute; // 子元素设置
    top: 50%;
    left: 50%;
    margin-top: -200px; //-自己高度的一半；
    margin-left: -200px; //-自己宽度的一半；
    // 或者
    transform: translate(-50%, -50%);
    // 或者
    top: 0; left: 0; right: 0; bottom: 0;

  • flex布局（ie8、ie9 不支持）

    1
    2
    3
    display: flex; // 父元素
    align-items: center; 
    justify-content: center;