HTML页面中设置同行元素垂直居中

素颜马尾好姑娘i 2023-06-20 06:42 23阅读 0赞

## *Using Flexbox to set vertical centre easily* ##

当我们用CSS设置HTML页面布局的时候，经常会遇到需要将若干Elements水平或者垂直对齐的情况。对我来说，水平对齐还比较容易处理，但是垂直对齐，尤其是在浮动float布局上将同一行的不同高度的元素垂直居中排列，常常让我头疼不已。如果你还没有被这样的痛苦折磨过，那么你很幸运，因为现在有了更简单和有效的办法，那就是Flexbox (Flex Layout)。为了和之前的实现方式对比，我列出了三种方案，分别是**Flexbox**，**inline-block**，**float**。三种方式的难易程度和效果大家可以做一个比较。

### Solution 1: Flexbox & align-items ###

使用Flexbox非常简单，只需要将需要垂直对齐的Elements（如上图中的div-A和div-B）放到一个容器container中（如上图的蓝色边框），将container的display属性设为“flex”，align-items设为“center”就可以了：

.container {
        display: flex;
        align-items: center;
    }

页面效果如下图所示，不同高度的图片和文字完美的在container中垂直居中对齐了：

![format_png][]

Flexbox对responsive webpage的支持也非常好，只要将“flex-wrap: wrap”加到container的样式中，页面缩小时Flexbox的元素会自动换行，不需额外设置breakpoint来控制：

![format_png 1][]

完整HTML及CSS代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Flex Layout</title>
        <style type="text/css">
        /* Solution 1: Flex box & align-items */
            .container {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
            }
            .item1, .item2 {
                margin: 0 auto;
            }
        
        /* Styles for both solutions */
            .container {
                width: 80%;
                height: 250px;
                margin: 50px auto;
                border: 8px solid lightblue;
            }
            .item1 img {
                width: 300px;
            }
            /* Define the img width when the screen is less than 421px */
            @media screen and (max-width: 420px) {
                .item1 img {
                    width: 100%;
                }
            }
            /* Define the container width when the screen is bigger than 1000px */
            @media screen and (min-width: 1000px) {
                .container {
                    width: 784px;
                }
            }
        </style>
    </head>
    <body>
    <div class="container">
        <div class="item1"><img src="img/cat.jpg" /></div>
        <h3 class="item2">Momo the CAT</h3>
    </div>
    </body>
    </html>

### Solution 2: Inline-block & vertical-align ###

第二种方案，我们用inline-block来实现：

/* Solution 2: Inline-block & vertical-align */
    
       .container {
           text-align: center;
           padding-top: 70px;
       }
       .item1, .item2 {
           display: inline-block;
           vertical-align: middle;
       }
       .item1 {
           width: 50%;
       }
       .item2 {
           width: 45%;
       }

将同行元素item1和item2的display属性设为"inline-block"，再把vertical-align设为"middle"。看到这里你也许会觉得这也不麻烦呀，为什么说Flexbox更好呢？如果仅仅设置了这两个属性，你会发现item1和item2仅仅是自己居中对齐了，他们并没有在container中居于垂直居中的位置。

如下图所示：

![format_png 2][]

为了让container中的元素垂直居中，不同于Solution1，我们需要做一些额外的设置，如container的padding-top，item1、item2的具体宽度（详见Solution2 CSS代码）。当页面在窄屏Device上显示时，还需要设置更多的breakpoint取消inline-block、调整padding-top、宽度设置等等，否则页面会出现各种问题。例如重叠、不再垂直居中等。当你的页面上有几十、上百个相关元素需要调整时，这绝对不会是个愉快的过程。

![format_png 3][]![format_png 4][]

### Solution 3: Float ###

为了垂直居中而采取浮动布局是非常不推荐的做法。我们都知道浮动框会引发整体布局的不稳定，如果每次用完浮动都加一些空白标签去清除浮动的话又会给页面带来过多的冗余代码。退一步讲，浮动只是能让item1和item2同行显示，为了让其垂直居中对齐，只能通过调整margin、padding或者调整relative的位置。当页面尺寸改变时，为了达到responsive的效果又需要更多的工作。Float实现的CSS代码如下，仅供比较参考，不推荐使用:

/* Solution 3: Float */
    .container {
        padding: 50px 15px;
        height: 172px;
    }
    .item1 {
        float: left;
    }
    h3 {
        float: right;
        margin: 4em 3em 0 0;
    }

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvOTYyMjM1LzIwMTcwNC85NjIyMzUtMjAxNzA0MjcwOTMwNTgxMzEtMTIzMTc4MjA2MS5wbmc?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvOTYyMjM1LzIwMTcwNC85NjIyMzUtMjAxNzA0MjcxMDIyMjIwNjktMjEzNTM4NTkwOC5wbmc?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvOTYyMjM1LzIwMTcwNC85NjIyMzUtMjAxNzA0MjcxMDA2NTk1NTMtMTQ1NzM0MTQwNC5wbmc?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvOTYyMjM1LzIwMTcwNC85NjIyMzUtMjAxNzA0MjcxMDMxNDQ5OTAtMTA4ODc0NDYyOC5wbmc?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvOTYyMjM1LzIwMTcwNC85NjIyMzUtMjAxNzA0MjcxMDMyMTA0NDQtMTI0OTU3OTgyOC5wbmc?x-oss-process=image/format,png