Fork me on GitHub

CSS实现元素居中的方法收集

发表于 | 分类于 ， |

文章概述

本篇文章记录CSS实现元素水平处置居中的方法收集的笔记。

概述

本文收录css常用到的标签元素水平垂直居中显示样式的设置方法，主要考虑以下两种情况：

  1. 居中元素固定宽高；
  2. 居中元素不固定宽高；

固定宽高元素居中

  1. absolute + 负margin
  2. absolute + margin auto
  3. absolute + calc

absolute+负margin

父元素使用相对定位，固定宽高居中元素使用绝对定位，设置margin偏移自身宽高的尺寸即可；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<style>
    .container {
        border: 1px solid blue;
        width: 100%;
        height: 500px;
        margin-top: 50px;
        position: relative;
    }
    .centerElement {
        background: green;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        position: absolute;;
        top: 50%;
        left: 50%;
        /*向左偏移50%的宽度*/
        margin-left: -50px;
        /*向上偏移50%的高度*/
        margin-top: -50px;
    }
</style>
<div class="container">
    <div class="centerElement">居中元素</div>
</div>

absolute+calc函数

父元素使用相对定位，固定宽高居中元素使用绝对定位，设置left、top偏移自身宽高的尺寸即可；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
    .container {
        border: 1px solid blue;
        width: 100%;
        height: 500px;
        margin-top: 50px;
        position: relative;
    }
    .centerElement {
        background: green;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        position: absolute;;
        top: calc(50% - 50px);
        left: calc(50% - 50px);
    }
</style>
<div class="container">
    <div class="centerElement">居中元素</div>
</div>

absolute+margin auto

父元素使用相对定位，固定宽高居中元素使用绝对定位，设置上下左右偏移为0，同时设置margin:auto即可；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<style>
    .container {
        border: 1px solid blue;
        width: 100%;
        height: 500px;
        margin-top: 50px;
        position: relative;
    }
    .centerElement {
        background: green;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        position: absolute;;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
</style>
<div class="container">
    <div class="centerElement">居中元素</div>
</div>
拓展
水平居中

可以不使用定位，设置居中元素的margin: 0 auto的方式，使元素水平居中；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
    .container {
        border: 1px solid blue;
        width: 100%;
        height: 500px;
        margin-top: 50px;
    }
    .centerElement {
        background: green;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        margin: 0 auto;
    }
</style>
<div class="container">
    <div class="centerElement">居中元素</div>
</div>

不固定宽高元素居中

居中的元素宽高不固定的情况

  1. absolute + transform
  2. lineheight
  3. writing-mode
  4. table
  5. css-table
  6. flex
  7. grid

absolute+transform

父元素使用相对定位，不固定宽高居中元素使用绝对定位，设置css平移属性translate，使元素负方向平移自身宽高的50%；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
    .container {
        border: 1px solid blue;
        width: 100%;
        height: 500px;
        margin-top: 50px;
        position: relative;
    }
    .centerElement {
        background: green;
        text-align: center;
        position: absolute;;
        top: 50%;
        left: 50%;
        /*设置元素水平的和垂直的偏移自身宽高的50%*/
        transform: translate(-50%, -50%);
    }
</style>
<div class="container">
    <div class="centerElement">居中元素</div>
</div>

writing-mode

利用writing-mode定义元素的书写排列方式，间接的让子元素水平和垂直居中；

特别注意：居中元素需要设置为行内块元素，确保不独占一行.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!--完整代码-->
<style>
    .container {
        border: 1px solid blue;
        width: 100%;
        height: 500px;
        margin-top: 50px;
        /*垂直方向书写,从左到右排列*/
        writing-mode: vertical-lr;
        text-align: center;
    }

    .container-inner{
        display: inline-block;
        /*水平方向书写,从上到下排列*/
        writing-mode: horizontal-tb;
        text-align: center;
        width: 100%;
    }

    .centerElement {
        background: green;
        display: inline-block;
        text-align: left;
        margin: auto;
    }
</style>
<div class="container">
    <div class="container-inner">
        <div class="centerElement">居中元素</div>
    </div>
</div>

line-height

设置居中元素的父元素行高line-height固定，并设置居中元素displayt为inline-block来实现垂直方向居中，再设置text-align为水平居中对齐；

特别注意：居中元素需要设置为行内块元素，确保不独占一行.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
    .container {
        border: 1px solid blue;
        width: 100%;
        height: 500px;
        margin-top: 50px;
        line-height: 500px;
        text-align: center;
    }
    .centerElement {
        background: green;
        display: inline-block;
        /*initial设置行高为最初的高度*/
        line-height: initial;
        /*相对于父元素的对齐方式*/
        vertical-align: middle;
    }
</style>
<div class="container">
    <div class="centerElement">居中元素</div>
</div>

table

tabel单元格中的内容天然支持垂直居中，再设单元格内容水平居中即可；

特别注意：居中元素需要设置为行内块元素，确保不独占一行.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<style>
    table{
        width: 100%;
    }
    .container {
        border: 1px solid blue;
        width: 100%;
        height: 500px;
        margin-top: 50px;
        text-align: center;
    }
    .centerElement {
        background: green;
        display: inline-block;
    }
</style>

<table>
    <tbody>
    <tr>
        <td class="container">
            <div class="centerElement">123123</div>
        </td>
    </tr>
    </tbody>
</table>

table-cell

可以设置居中元素的父元素的display为table-cell单元格样式元素，并设置子元素水平垂直居中，最后设置居中元素为行内块元素即可；

特别注意：居中元素需要设置为行内块元素，确保不独占一行.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
    .container {
        border: 1px solid blue;
        width: 500px;
        height: 500px;
        margin-top: 50px;
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
    .centerElement {
        background: green;
        display: inline-block;
    }
</style>
<div class="container">
    <div class="centerElement">居中元素</div>
</div>

flexbox

flex弹性盒子布局方式，很容易让元素居中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
    .container {
        border: 1px solid blue;
        width: 500px;
        height: 500px;
        margin-top: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .centerElement {
        background: green;
    }
</style>
<div class="container">
    <div class="centerElement">居中元素</div>
</div>

grid

css新增的grid布局方式，flex的升级版;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
    .container {
        border: 1px solid blue;
        width: 500px;
        height: 500px;
        margin-top: 50px;
        display: grid;
    }
    .centerElement {
        background: green;
        align-self: center;
        justify-self: center;
    }
</style>
<div class="container">
    <div class="centerElement">居中元素</div>
</div>

总结

元素居中方法使用场景：

  • PC端有兼容性要求，宽高固定，推荐absolute+负margin；
  • PC端有兼容要求，宽高不固定，推荐css-table；
  • PC端无兼容性要求，推荐flex；
  • 移动端推荐使用flex；
方法 居中元素定宽高固定 PC兼容性 移动端兼容性
absolute+负margin 是 ie6+, chrome4+, firefox2+ 安卓2.3+, iOS6+
absolute+margin auto 是 ie6+, chrome4+, firefox2+ 安卓2.3+, iOS6+
absolute+calc 是 ie9+, chrome19+, firefox4+ 安卓4.4+, iOS6+
absolute+transform 否 ie9+, chrome4+, firefox3.5+ 安卓3+, iOS6+
writing-mode 否 ie6+, chrome4+, firefox3.5+ 安卓2.3+, iOS5.1+
lineheight 否 ie6+, chrome4+, firefox2+ 安卓2.3+, iOS6+
table 否 ie6+, chrome4+, firefox2+ 安卓2.3+, iOS6+
css-table 否 ie8+, chrome4+, firefox2+ 安卓2.3+, iOS6+
flex 否 ie10+, chrome4+, firefox2+ 安卓2.3+, iOS6+
grid 否 ie16, chrome57+, firefox52+ 安卓6+, iOS10.3+
坚持原创技术分享，您的支持将鼓励我继续创作！
分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微博 豆瓣 一键分享 更多