顽石系列：CSS实现垂直居中的五种方法

顽石系列：CSS实现垂直居中的五种方法

方法一:Vertical-Align法

　　我们使用 vertical-align:middle 来实现元素垂直居中。

　　

　　CSS 的属性 vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。

　　我们可以把div 的显示方式设置为表格，从而使用表格的 vertical-align middle 属性。

    <style>
        #wrapper{
            width: 200px;
            height: 200px;
            background-color: aqua;
            display: table;
        }
        #content{
            display: table-cell;
            vertical-align: middle;
        }
    </style>

    <div id="wrapper">
        <div id="content">
            Content is Here!
        </div>
    </div>

分析

示例

　　

优点

• content 可以动态改变高度(不需在 CSS 中定义)。当 wrapper 里没有足够空间时， content 不会被截断

缺点

• Internet Explorer(甚至 IE8 beta)中无效，许多嵌套标签(其实没那么糟糕，另一个专题)

方法二：绝对定位+负边距法

　　这个方法使用绝对定位的 div，把它的 top 设置为 50％，margin-top 设置为负的 content 高度。这意味着对象必须在 CSS 中指定固定的高度。因为有固定高度，也许你得给 content 指定 overflow:auto，这样如果 content 太多的话，就会出现滚动条，以免content 溢出。

<div class="content"> Content goes here</div>  

#content {
    position: absolute;
    top: 50%;
    height: 240px;
    margin-top: -120px; /* negative half of the height */
}

分析

优点

• 适用于所有浏览器
• 不需要嵌套标签

缺点

• 没有足够空间时，content 会消失(类似div 在 body 内，当用户缩小浏览器窗口，滚动条不出现的情况)

方法三：浮动元素法

　　这个方法的原理是利用一个空的浮动元素来控制主要内容在容器中的位置。

　　

　　比如我们的目标是让红色DIV位于绿色父级元素的中间，我们要让一个浮动元素占据黄色的位置，然后红色元素清除浮动，自然而然到达居中位置。

        #parent {
            padding: 5% 0;
            background-color: green;
        }

        #floater {
            float: left;
            height: 50%;
            width: 100%;
            margin-bottom: -50px;
            background: yellow;
        }

        #child {
            clear: both;
            height: 100px;
            background: red;
        }

        <div id="parent">
            <div id="floater"></div>
            <div id="child">Content here</div>
        </div>

方法四：FLEX定位法

　　CSS属性flex规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间。

　　效果是这样的：

　　

        #wrapper{
            display: flex;
            height: 100px;
            background: green;
        }
        #content{
            margin: auto;
            background-color: red;
        }

    <div id="wrapper">
        <div id="content">
            Content is Here!
        </div>
    </div>

　还有一种垂直居中的实现方式 ，针对移动端页面布局的，很好用

#parent{
　　display:flex ;
　　align-items:center; 垂直居中
　　justify-content:center ; //水平居中
}

方法五：Line-Height方法

　　这个方法适用于单行文字的垂直居中，只需要将包含文字元素的容器行高设置为大于字体大小并且等于元素的高度。默认情况下，文字上下部分会留有相同的空间，因而实现了文字的垂直居中。

<div id="parent">
    <div id="child">Text here</div>
</div>

#child {
    line-height: 200px;
}

　　这种方法只适用于单行文字的垂直居中，如果需要多行文字居中，需要选择其他方法。

参考资料

行内元素的记录规则

　　字体大小要加粗，组合图像输入框，锚准斜体的菜单，强调换行上下标。

• 行内元素：https://blog.****.net/bwf_erg/article/details/69844527
• MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align
• 六种方法：https://www.jianshu.com/p/086364d3d5e2
• 五种方法：https://www.qianduan.net/css-to-achieve-the-vertical-center-of-the-five-kinds-of-methods/