HTML之元素居中显示

发表于 | 分类于   |   字数统计: 1.9k(字)   |   阅读时长: 8(分) | 本文总阅读量 次
一个人真正的幸福并不是呆在光明之中，而是从远处凝望光明，朝它奔去，就在那拼命忘我的时间里，才有人生真正的充实。

元素居中显示

在我们日常布局中，经常会用到元素居中显示的效果，这节，我就来整理整理那些让元素居中的方法。

一般的，我们要将一个文本水平居中，可以给其text-align: center来达到居中效果，将一个文本竖直居中的话，我们给其行高，相应的，它会以行高的值进行竖直居中。但是，我们经常要将块级元素竖直水平居中，以下情况，主要就是针对块级元素将其居中。

一、利用 margin 实现居中显示

原理：利用其边距来达到居中效果

优点：这种方式适用于任何浏览器(IE7以上)，不需要考虑兼容问题

缺点：要居中元素相对于其父元素必须有固定宽高

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素居中</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background: #7ccbfc;
            /*定位为绝对定位 absolute 跟 fixed 都行*/
            position: absolute;
            /*position: fixed;*/
            left: 50%;
            top: 50%;
            margin-left: -100px;
            margin-top: -100px;
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

二、绝对定位

此方法类似于第一种

优点：可以兼容任何浏览器，并且不需要固定宽高，任意值都可以

代码如下：

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素居中</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background: #7ccbfc;
            /*此处为position 跟fixed 都可以*/
            position: absolute;
            /*position: fixed;*/
            margin: auto;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

三、transform 实现居中显示

在这里，我们需要将要居中的元素开启绝对定位

  • translate(x,y) 括号的百分比数据，会以本身的长宽做参考，设置为原宽高的一半，一般情况下，设置为-50%

原理：设置其距离上左位置均为50%，但是我们的元素参考位置是左上角，所以只设置位置50%会向右下偏移其元素宽高的一半，因此，我们需要再让其向左上偏移元素宽高一半的值，就能达到让元素居中的效果。

优点：相比于第一种，优点就是不需要元素的宽高也可以让其居中

代码如下：

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素居中</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            position: absolute;
            width: 200px;
            height: 200px;
            background: #00acee;
            left: 50%;
            top: 50%;
            transform: translate( -50%, -50%);
            /*兼容Chrome、safari 浏览器*/
            -webkit-transform: translate(-50%, -50%);
            /*兼容Firefox 浏览器*/
            -moz-transform: translate(-50%, -50%);
        }
    </style>
</head>
    <body>
        <div class="box"></div>
    </body>
</html>

四、添加伪元素（::before、::after）实现居中显示

使用此方法之前，先说说css里面的vertical-align 属性，虽然这个属性能达到垂直置中，但是是指元素内的所有元素垂直位置互相置中，并不是相对于父元素的高度垂直居中。也就是说只有左右居中。但是如果要居中的元素中有一个元素的高度变为父元素的100%，那么就会实现垂直居中。所以使用伪元素来让要居中元素有一个高度为父元素的100%的伪 元素。注意 ：div 一定要设置其属性 display: inline-block，因为vertical-align: middle是针对行内元素。

代码如下：

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素居中</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            height: 400px;
            width: 400px;
            border: 1px solid black;
            text-align: center;
        }
        .box1{
            width: 50px;
            height: 70px;
            background: yellowgreen;
            display: inline-block;
            vertical-align: middle;
        }
        .box2{
             width: 50px;
             height: 100px;
             background: #00acee;
             display: inline-block;
             vertical-align: middle;
         }
        .box3{
            width: 50px;
            height: 70px;
            background: blue;
            display: inline-block;
            vertical-align: middle;
        }
        .box::before{
            content: '';
            height: 100%;
            display: inline-block;
            position: relative;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>
</body>
</html>

五、calc 动态计算实现居中显示

calc()支持CSS3；任何长度值都可以使用calc()函数进行计算

原理：利用calc() 函数的动态计算的能力，设置要居中元素的top值为50% - 50%的 div 高度，left值为50% - 50%的div高度。

代码如下：

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素居中</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            height: 400px;
            width: 400px;
            border: 1px solid black;
        }
        .box1{
            height: 100px;
            width: 100px;
            background: red;
            position: relative;
            top: calc(50% - 50px);
            left: calc(50% - 50px);
        }

    </style>
</head>
<body>
<div class="box">
    <div class="box1"></div>
</div>
</body>
</html>

六、使用表格或假装表格实现居中显示

1. 表格居中显示

这种方法是直接在表格中利用行内元素直接水平竖直居中

代码如下：

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
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素居中</title>
    <style>
        td{
            width: 400px;
            height: 400px;
            border: 1px solid red;
            vertical-align: middle;
            background: yellowgreen;
        }
        td div{
            width: 100px;
            height: 100px;
            margin: 0 auto;
            color: #000;
            /*让其中字竖直居中*/
            line-height: 100px;
            /*让其中字水平居中*/
            text-align: center;
            background: #0c83e7;
        }

    </style>
</head>
<body>
<table>
    <tr>
        <td>
            <div>表格居中</div>
        </td>
    </tr>
</table>

</body>
</html>

2. 假装表格居中显示

这种方式主要是通过设置要居中元素的父元素的属性display: table-cell

注意：修改display的时候可能会影响其他样式，需要谨慎使用

代码如下：

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素居中</title>
    <style>
        .box{
            display: table-cell;
            width: 400px;
            height: 450px;
            border: 1px solid red;
            vertical-align: middle;
        }
        .box div{
            width: 120px;
            height: 80px;
            margin: 0 auto;
            color: #000;
            /*让其中洗竖直居中*/
            line-height: 80px;
            /*让其中字水平居中*/
            text-align: center;
            background: #0B61A4;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>假装为表格居中</div>
    </div>
</body>
</html>

七、使用 Flexbox 弹性布局实现居中显示

这个方法使元素居中是我们最常用的方式，弹性布局在移动端使用最多，因为大部分手机浏览器都支持这个方法。

原理：使用align-items 或者 align-content 的属性，轻松使元素居中显示。

代码如下：

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素居中五（Flexbox）</title>
    <style>
        .box{
            width: 400px;
            height: 400px;
            border: 1px solid black;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .box div{
            width: 100px;
            height: 50px;
            background: red;
        }
    </style>
</head>
<body>
<div class="box">
    <div>要居中的元素</div>
</div>
</body>
</html>

注：flexbox 布局的属性众多，后续会写一篇关于flex 的所有内容。如果有兴趣，可以去阮一峰大佬的博客看有关flex弹性布局的所有知识！！强烈推荐大佬博客！！

结束语

自此，是我对于元素居中显示的只是总结整理。可能不全面，欢迎各位大佬指正！

本文标题:HTML之元素居中显示

文章作者:Dylan

发布时间:2019年08月06日 - 16:08

最后更新:2019年08月14日 - 17:08

原始链接:https://blog.puchao.cc/2019/08/06/HTML之元素居中显示/

许可协议:署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------本文结束感谢您的阅读-------------
0%
undefined