前端系列第9期-居中元素(最终版)

发表于 | 分类于 |
字数统计: 2,240 字 | 阅读时长 ≈ 10 分钟

元素居中思维导图

本文介绍元素水平居中，垂直居中还有各种水平垂直居中的方法，思维导图如下:

水平居中

行内元素水平居中

利用text-align:center可以实现在块级元素内部的行内元素水平居中。此方法对inline、inline-block、inline-table和inline-flex元素水平居中有效。

1
2
3
4
/* 在父容器设置 */
.parent {
    text-align: center;
}

此外，如果块级元素内部包着也是一个块级元素，我们可以先将其由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中。

1
2
3
4
5
6
7
8
9
10
11
<div class="parent">
    <div class="child">Demo</div>
</div>
<style>
    .parent {
        text-align: center;
    }
    .child {
        display: inline-block;
    }
</style>

块级元素的水平居中

这种情形可以有多种实现方式，下面我们详情介绍：

将块级元素的左右外边距margin-left和margin-right设置为auto
1
2
3
4
5
.child {
    margin: 0 auto;
    /* 确保该块级定宽 */
    width: 100px; 
}
使用table+margin

先将子元素设置为块级表格来显示(类似)，再将其设置水平居中。
display:table在表现上类似block元素，但是宽度为内容宽。

1
2
3
4
5
6
7
8
9
<div class="parent">
    <div class="child">Demo</div>
</div>
<style>
    .child {
        display: table;
        margin: 0 auto;
    }
</style>

使用absolute+transform

先将父元素设置为相对定位，再将其子元素设置为绝对定位，向右移动子元素，移动距离为父容器的一半，最后通过向左移动子元素的一半宽度以达到水平居中。

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="parent">
    <div class="child">Demo</div>
</div>
<style>
    .parent {
        position: relative;
    }
    .child {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
</style>

使用flex+justify-content

通过CSS3中的布局利器flex中的justify-content属性来达到水平居中。

1
2
3
4
5
6
7
8
9
<div class="parent">
    <div class="child">Demo</div>
</div>
<style>
    .parent {
        display: flex;
        justify-content: center;
    }
</style>

flex+margin

通过flex将父容器设置为Flex布局，再设置子元素居中。

1
2
3
4
5
6
7
8
9
10
11
<div class="parent">
    <div class="child">Demo</div>
</div>
<style>
    .parent {
        display: flex;
    }
    .child {
        margin: 0 auto;
    }
</style>

多块级元素水平居中

利用flex布局

利用弹性布局(flex)，实现水平居中，其中justify-content 用于设置弹性盒子元素在主轴（默认横轴）方向上的对齐方式。

1
2
3
4
.parent {
    display: flex;
    justify-content: center;
}

利用inline-block

将要水平排列的块状元素设为display:inline-block，然后在父级元素上设置text-align:center，达到与上面的行内元素的水平居中一样的效果。

1
2
3
4
5
6
.parent {
    text-align: center;
}
.child {
    display: inline-block;
}

浮动元素水平居中

一共三种方法:

  • 对于定宽的浮动元素，通过子元素设置relative+负margin
  • 对于不定宽的浮动元素，父子容器都用相对定位
  • 通用方法（无论是否定宽）: flex布局
定宽的非浮动元素

通过子元素设置relative+负marfin

1
2
3
4
5
6
7
8
9
10
11
<div class="parent">
    <span class="child" style="float: left; width: 500px;">我是要居中的浮动元素</span>
</div>
<style>
    .child {
        position: relative;
        left: 50%;
        width: 500px;
        margin-left: -250px;
    }
</style>

不定宽的浮动元素

通过父子容器都相对定位，偏移位移。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="parent">
    <div class="child">我是浮动</div>
    <div class="child">我也是浮动</div>
</div>
<style>
    .parent {
        float: left;
        position: relative;
        left: 50%;
    }
    .child {
        float: left;
        position: relative;
        right: 50%;
    }
</style>

通用办法flex布局(无论是否定宽)

利用弹性布局(flex)的justify-content属性，实现水平居中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="parent">
    <span class="child">我是居中的浮动元素</span>
</div>
<style>
    .parent {
        display: flex;
        justify-content: center;
    }
    .child {
        float: left;
        /* 这里有无宽度不影响居中 */
        width: 200px; 
    }
</style>

绝对定位元素水平居中

这种方式非常独特，通过子元素绝对定位，外加margin: 0 auto来实现。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="parent">
    <div class="child">让绝对定位的元素水平居中对齐。</div>
</div>
<style>
  .parent{
        position:relative;
    }
   .child{
        position: absolute; /*绝对定位*/
        left: 0; /*此处不能省略，且为0*/
        right: 0;/*此处不能省略，且为0*/
        margin: 0 auto; /*水平居中*/
        width: 200px;
        height:100px;
        background: yellow;
    }

垂直居中

单行内联元素垂直居中

利用行高和高度一样实现垂直居中(并不是完全的垂直居中,详情CSS世界)。

1
2
3
4
5
6
7
8
9
10
<div class="parent">
     <span>单行内联元素垂直居中</span>。
</div>
<style>
.parent {
    height: 120px;
    line-height: 120px;
    border: 2px dashed #f69c55;
}
</style>

多行内联元素垂直居中

利用flex布局（flex）

利用flex布局实现垂直居中，其中flex-direction: column定义主轴方向为纵向。这种方式在较老的浏览器存在兼容性问题。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="parent">
    <p>Dance like nobody is watching, code like everybody is.
    Dance like nobody is watching, code like everybody is.
    Dance like nobody is watching, code like everybody is.</p>
</div>
<style>
    .parent {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 140px;
        border: 2px dashed #f69c55;
    }
</style>

利用表布局（table）

利用表布局的vertical-align: middle可以实现子元素的垂直居中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="parent">
    <p class="child">The more technology you learn, the more you realize how little you know.
    The more technology you learn, the more you realize how little you know.
    The more technology you learn, the more you realize how little you know.</p>
</div>
 <style>
    .parent {
        display: table;
        height: 140px;
        border: 2px dashed #f69c55;
    }
    .child {
        display: table-cell;
        vertical-align: middle;
    }
</style>

块级元素垂直居中

使用absolute+负margin(已知高度宽度)

通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半，就可以实现了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="parent">
    <div class="child">固定高度的块级元素垂直居中。</div>
</div>
<style>
    .parent {
        position: relative;
    }
    .child {
        position: absolute;  
        top: 50%;
        margin-top: -50px;
        height: 100px;
    }
</style>

使用absolute+transform

当垂直居中的元素的高度和宽度未知时，可以借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="parent">
    <div class="child">未知高度的块级元素垂直居中。</div>
</div>
<style>
    .parent {
        position: relative;
    }
    .child {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
</style>

使用flex+align-items

通过设置flex布局中的属性align-items，使子元素垂直居中。

1
2
3
4
5
6
7
8
9
<div class="parent">
    <div class="child">未知高度的块级元素垂直居中。</div>
</div>
<style>
    .parent {
        display:flex;
        align-items:center;
    }
</style>

使用table-cell+vertical-align

通过将父元素转化为一个表格单元格显示（类似<td>和<th>），再通过设置 vertical-align属性，使表格单元格内容垂直居中。

1
2
3
4
5
6
7
8
9
<div class="parent">
  <div class="child">Demo</div>
</div>
<style>
  .parent {
    display: table-cell;
    vertical-align: middle;
  }
</style>

水平垂直居中

绝对定位与负边距实现（已知高度宽度）

这种方式需要知道被垂直居中元素的高和宽，才能计算出margin值，兼容所有浏览器。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="parent">
    <div class="child" style="width: 100px;height: 100px;background-color: #666">center</div>
</div>
<style>
    .parent {
        position: relative;
    }
    .child {
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -50px 0 0 -50px;
    }
</style>

绝对定位与margin:auto

这种方式无需知道被垂直居中元素的高和宽，但不能兼容低版本的IE浏览器。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="parent">
    <div class="child" style="width: 100px;height: 100px;background-color: #666">center</div>
</div>
<style>
    .parent {
        position: relative;
        /* 父容器必须有高度 */
        height:100px;
    }
    .child {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /* 注意此处的写法 */
        margin: auto;
    }
</style>

绝对定位+CSS3(未知元素的高宽)

利用Css3的transform，可以轻松的在未知元素的高宽的情况下实现元素的垂直居中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="parent">
    <div class="child" style="width: 100px;height: 100px;background-color: #666">center</div>
</div>
<style>
    .parent {
        position: relative;
    }
    .child {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>

flex布局

利用flex布局，其中justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式；而align-items属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

1
2
3
4
5
6
7
8
9
10
11
<div class="parent">
    <div class="child" style="width: 100px;height: 100px;background-color: #666">center</div>
</div>
<style>
    .parent {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }
</style>

flex/grid与margin:auto(最简单写法)

容器元素设为 flex 布局或是grid布局，子元素只要写 margin: auto 即可,不能兼容低版本的IE浏览器。

1
2
3
4
5
6
7
8
9
10
11
12
<div class="parent">
    <div class="child" style="width: 100px;height: 100px;background-color: #666">center</div>
</div>
<style>
.parent {
    display: grid;
    height: 100vh;//必须有高度
}
.child {
    margin: auto;
}
</style>