前端壹甲壹

Appearance

Return to top
On this page

元素居中在开发、面试中都会碰到，本文从以下两个层面来汇总元素居中的办法

  • 居中元素 固定宽高
  • 居中元素 不定宽高

一、固定宽高

ps: 元素 child 固定宽高尺寸如下

css
child: {width: 200px; height: 200px;}

1.1、absolute + 负 margin

css
.parent{
    position: relative;
}
.child{ 
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
}

1.2、absolute + margin auto

css
.parent{
    position: relative;
}
.child{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

1.3、absolute + calc

css
.parent{
    position: relative;
}
.child{
    position: absolute;
    top: calc(100% - 50px);
    left: calc(100% - 50px);
}

二、不固定宽高

2.1、absolute + transform

css
.parent{
    position: relative;
}
.child{
    border: 1px solid green;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

2.2、lineheight

css
.parent{
    line-height: 300px;
    text-align: center;
    font-size: 0;
}
.child{
    display: inline-block;
    vertical-align: center;
    line-height: initial;
    text-align: left; /* 修复文字 */
}

2.3、table 标签

html
<table>
    <tbody>
        <tr>
            <td class="parent">
                <div class="child">text</div>
            </td>
        </tr>
    </tbody>
</table>
<style>
.parent{
    text-align: center;
}
.child{
    display: inline-block;
}
</style>

2.4、css-table

css
.parent{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.child{
    display: inline-block;
}

2.5、flex

css
.parent{
  display: flex;
  align-items: center;
  justify-content: center;
}

2.6、grid

css
.parent{
  display: grid;
}

.child{
  align-self: center;
  justify-self: center;
  /* 或
  * margin: auto;
  */
}

三、总结推荐

  • 无兼容性要求，推荐使用 flex 实现居中