水平垂直居中的几种方式

水平垂直居中

一、实现水平垂直居中的方式

元素定宽高（知道元素宽高）

• 利用定位 + calc
• 利用定位 + margin:负值

元素不定宽高（不知道元素宽高）

• 利用定位 + margin:auto
• 利用定位 + transform
• flex 布局
• grid 布局
• table 布局

二、具体实现

元素定宽高

利用定位 + calc

<style>
    .outer {
        position: relative;
        
        width: 200px;
        height: 200px;
        background-color: red;
    }
    .inner {
        position: absolute;
        top: calc(50% - 50px);
        left: calc(50% - 50px);

        width: 100px;
        height: 100px;
        background-color: yellow;
    }
</style>
<div class="outer">
    <div class="inner"></div>
</div>

利用定位 + margin:负值

<style>
    .outer {
        position: relative;

        width: 200px;
        height: 200px;
        background-color: red;
    }
    .inner {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -50px;
        margin-top: -50px;

        width: 100px;
        height: 100px;
        background-color: yellow;
    }
</style>
<div class="outer">
    <div class="inner"></div>
</div>

元素不定宽高

利用定位 + margin:auto

<style>
    .outer {
        position: relative;

        width: 200px;
        height: 200px;
        background-color: red;
    }
    .inner {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;

        width: 100px;
        height: 100px;
        background-color: yellow;
    }
</style>
<div class="outer">
    <div class="inner"></div>
</div>

利用定位 + transform

<style>
    .outer {
        position: relative;

        width: 200px;
        height: 200px;
        background-color: red;
    }
    .inner {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        width: 100px;
        height: 100px;
        background-color: yellow;
    }
</style>
<div class="outer">
    <div class="inner"></div>
</div>

缺点：兼容性不佳

flex 布局

<style>
    .outer {
        display: flex;
        justify-content: center;
        align-items: center;

        width: 200px;
        height: 200px;
        background-color: red;
    }
    .inner {
        width: 100px;
        height: 100px;
        background-color: yellow;
    }
</style>
<div class="outer">
    <div class="inner"></div>
</div>

缺点：兼容性不佳

grid 布局

<style>
    .outer {
        display: grid;
        justify-content: center;
        align-items: center;
        
        width: 200px;
        height: 200px;
        background-color: red;
    }
    .inner {
        width: 100px;
        height: 100px;
        background-color: yellow;
    }
</style>
<div class="outer">
    <div class="inner"></div>
</div>

缺点：兼容性不佳

table 布局

<style>
    .outer {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        
        width: 200px;
        height: 200px;
        background-color: red;
    }
    .inner {
        display: inline-block;

        width: 100px;
        height: 100px;
        background-color: yellow;
    }
</style>
<div class="outer">
    <div class="inner"></div>
</div>

另：行内元素水平垂直居中

水平居中

• 在行内元素的父元素设置：text-align: center;
• flex布局：在行内元素的父元素设置：display: flex;justify-content: center;

垂直居中

• 单行文本
  • 把 line-height 设置为父元素的高度
  • flex布局：在行内元素的父元素设置：display: flex;align-items: center;
• 多行文本
  • 在父元素设置： disaply: table-cell; vertical-align: middle; （多行文本垂直居中也适合单行文本的垂直居中）

参考资料

• 面试官：你能实现多少种水平垂直居中的布局（定宽高和不定宽高）
• 面试官：元素水平垂直居中的方法有哪些？如果元素不定宽高呢？