您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > 在html+css中實(shí)現(xiàn)文字垂直居中的方法

在html+css中實(shí)現(xiàn)文字垂直居中的方法

文章來源：365jz.com 點(diǎn)擊數(shù)：1048 更新時(shí)間：2021-07-17 12:50 參與評論

使用css進(jìn)行文字的水平和垂直居中，并不是一件容易的事情，有些新手在使用css方法去實(shí)現(xiàn)css居中，在瀏覽器并沒有什么效果，可能是由于兼容的問題或者是一些非主流的瀏覽器。

在html+css中實(shí)現(xiàn)文字垂直居中的方法總結(jié)如下：

1.使用絕對定位和負(fù)外邊距對塊級元素進(jìn)行垂直居中

css垂直居中效果：

css垂直居中實(shí)現(xiàn)代碼：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>365建站演示</title>
    <style type="text/css">
        #box {
            width: 300px;
            height: 300px;
            background: #DDD;
            position: relative;
        }
        
        #child {
            width: 150px;
            height: 100px;
            position: absolute;
            top: 50%;
            margin-top: -50px;
            margin-left: 75px;
            background: orange;
            line-height: 100px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="child">
            我是測試DIV
        </div>
    </div>
</body>
</html>

這個(gè)方法兼容性不錯(cuò)，但是有一個(gè)小缺點(diǎn)：必須提前知道被居中塊級元素的尺寸，否則無法準(zhǔn)確實(shí)現(xiàn)垂直居中。

2.使用絕對定位和transform

代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>365建站演示</title>
    <style type="text/css">
        #box {
            width: 300px;
            height: 300px;
            background: #DDD;
            position: relative;
        }
        
        #child {
            width: 150px;
            height: 100px;
            position: absolute;
            top: 50%;
            transform: translate(50%, -50%);
            background: orange;
            line-height: 100px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="child">
            我是測試DIV
        </div>
    </div>
</body>
</html>

這種方法非常明顯的好處就是不必提前知道被居中的元素的尺寸，因?yàn)閠ransform中偏移的百分比就是相對于元素自身的尺寸而言。

3.絕對定位結(jié)合margin:auto

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>365建站演示</title>
    <style type="text/css">
        #box {
            width: 300px;
            height: 300px;
            background: #DDD;
            position: relative;
        }
        
        #child {
            width: 150px;
            height: 100px;
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            margin: auto;
            background: orange;
            line-height: 100px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="child">
            我是測試DIV
        </div>
    </div>
</body>
</html>

這種方式的兩個(gè)核心是：把要垂直居中的元素相對于父元素絕對定位，top和bottom設(shè)置為相等的值，我這里設(shè)置成0了，當(dāng)然也可以設(shè)置為99999px或者-99999px，無論什么，只要兩者相等就行。這一一步做完之后再將要居中的元素的margin設(shè)為auto，這樣就可以實(shí)現(xiàn)垂直居中了。

被居中元素的寬度也可以不設(shè)置，但是不設(shè)置的話，就必須是圖片這種自身就包含尺寸的元素，否則無法實(shí)現(xiàn)。

4.使用padding實(shí)現(xiàn)子元素的垂直居中

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>365建站演示</title>
    <style type="text/css">
        #box {
            width: 300px;
            background: #DDD;
            padding: 100px 0;
        }       
        #child {
            width: 150px;
            height: 100px;
            background: orange;
            line-height: 100px;
            margin: 0 auto;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="child">
            我是測試DIV
        </div>
    </div>
</body>
</html>

這種方式非常簡單，就是給父元素設(shè)置相等的上下內(nèi)邊距，則子元素自然是垂直居中的，自然這個(gè)時(shí)候父元素是不能設(shè)置高度的，要讓它自動(dòng)被填充起來，除非設(shè)置了一個(gè)正好等于上內(nèi)邊距+子元素高度+下內(nèi)邊距的值，否則無法精確地垂直居中。

這種方式看似沒有什么技術(shù)含量，但其實(shí)在某種場景下也是非常好用的。

5.使用flex布局

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>365建站演示</title>
    <style type="text/css">
        #box {
            width: 300px;
            height: 100px;
            background: #DDD;
            /*flex 布局*/
            display: flex;
            /*實(shí)現(xiàn)垂直居中*/
            align-items: center;
            /*實(shí)現(xiàn)水平居中*/
            justify-content: center;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="child">
            我是測試DIV
        </div>
    </div>
</body>
</html>

flex布局（彈性布局/伸縮布局）里門道頗多，這里先針對用到的東西簡單說一下。

flex也就是flexible，意思為靈活的，柔韌的，易彎曲的。

元素可以通過設(shè)置display:flex;將其指定為flex布局的容器，指定好了容器之后再為其添加align-items屬性，該屬性定義項(xiàng)目在交叉軸（這里是縱向周）上的對齊方式，可能的取值有五種，分別如下：

flex-start:交叉軸的起點(diǎn)對齊；flex-end:交叉軸的重點(diǎn)對齊；

center：交叉軸的重點(diǎn)對齊；baseline項(xiàng)目第一行文字的基線對齊；

strech(該值是默認(rèn)值)：如果項(xiàng)目沒有設(shè)置高度或者設(shè)置為auto，那么將占滿整個(gè)容器的高度。

6.彈性布局

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>365建站演示</title>
    <style type="text/css">
        #box {
            width: 300px;
            height: 300px;
            background: #DDD;
            /*flex 布局*/
            display: flex;
            /*實(shí)現(xiàn)垂直居中*/
            align-items: center;
            /*實(shí)現(xiàn)水平居中*/
            justify-content: center;
        }    
        #child {
            width: 300px;
            height: 100px;
            background: orange;
            line-height: 100px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="child">
            我是測試DIV
        </div>
    </div>
</body>
</html>

這種方式也是給父元素設(shè)置display:flex,設(shè)置好之后改變主軸的flex-direction:column,該屬性可能的取值有四個(gè)，分別如下：

row(該值為默認(rèn)值)：主軸為水平方向，起點(diǎn)在左端；

row-reverse，主軸是水平方向，起點(diǎn)在有端；

column主軸為垂直方向，起點(diǎn)在上沿；

column-reverse：主軸為垂直方向，起點(diǎn)在下沿。

justify-content屬性定義了項(xiàng)目在主軸上的對齊方式，可能取的值有五個(gè)，分別如下（不過具體的對齊方式與主軸的方向有關(guān)，以下的值都是假設(shè)主軸為從左到右的）：

flex-staart(該值是默認(rèn)值)：左對齊；

flex-end:右對齊；

center:居中對齊；

space-between:兩端對齊，各個(gè)項(xiàng)目之間的間隔均對齊；

space-around:各個(gè)項(xiàng)目兩側(cè)的間隔相等。

7.還有一種在前面已經(jīng)見到過很多次的方式就是使用line-height對單行文本進(jìn)行垂直居中

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>365建站演示</title>
    <style type="text/css">
        #box {
            width: 300px;
            height: 300px;
            background: #DDD;
            /*flex 布局*/
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        
        #child {
            width: 300px;
            height: 100px;
            background: orange;
            line-height: 100px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="child">
            我是測試DIV
        </div>
    </div>
</body>
</html>

這里有一個(gè)小坑需要大家注意：line-height（行高）的值不能設(shè)為100%；我們來看看官網(wǎng)文檔中給出的關(guān)于line-height取值為百分比時(shí)候的描述：基于當(dāng)前字體尺寸的百分比行間距，所以大家就明白了，如果是百分比是相對于字體尺寸來講的。

8.使用display:table和vertical-align對容器里的文字進(jìn)行垂直居中

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>365建站演示</title>
    <style type="text/css">
        #box {
            width: 300px;
            height: 300px;
            background: #DDD;
            display: table;
            text-align: center;
        }
        #child {
            display: table-cell;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="child">
            我是測試DIV
        </div>
    </div>
</body>
</html>

這里關(guān)于vertical-align啰嗦兩句：vertical-align屬性只對擁有valign特性的html元素起作用，例如表格元素中的<td><th>等等，而像<div><span>這樣的元素是不行的。

valign屬性規(guī)定單元格中內(nèi)容的垂直排列方式，語法：<tdvalign="value">，value的可能取值有四種：

top：對內(nèi)容進(jìn)行上對齊

middle：對內(nèi)容進(jìn)行居中對齊

bottom：對內(nèi)容進(jìn)行下對齊

baseline：基線對齊

關(guān)于baseline值：基線是一條虛構(gòu)的線。在一行文本中，大多數(shù)字母以基線為基準(zhǔn)。baseline值設(shè)置行中的所有表格數(shù)據(jù)都分享相同的基線。該值的效果常常與bottom值相同。不過，如果文本的字號各不相同，那么baseline的效果會(huì)更好。

9.css3的box方法實(shí)現(xiàn)水平垂直居中

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>365建站演示</title>
    <style type="text/css">
        #box {
            width: 300px;
            height: 200px;
            padding: 10px;
            border: 1px solid #ccc;
            background: #DDD;
            color: #fff;
            margin: 20px auto;
            display: -webkit-box;
            -webkit-box-orient: horizontal;
            -webkit-box-pack: center;
            -webkit-box-align: center;
            display: -moz-box;
            -moz-box-orient: horizontal;
            -moz-box-pack: center;
            -moz-box-align: center;
            display: -o-box;
            -o-box-orient: horizontal;
            -o-box-pack: center;
            -o-box-align: center;
            display: -ms-box;
            -ms-box-orient: horizontal;
            -ms-box-pack: center;
            -ms-box-align: center;
            display: box;
            box-orient: horizontal;
            box-pack: center;
            box-align: center;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="child">
            我是測試DIV
        </div>
    </div>
</body>
</html>

上面就是分享在html+css中實(shí)現(xiàn)文字垂直居中的方法，希望對你有幫助！

如對本文有疑問，請?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會(huì)為你解答??！點(diǎn)擊進(jìn)入論壇

您可能感興趣的文章:

發(fā)表評論 (1048人查看，0條評論): 請自覺遵守互聯(lián)網(wǎng)相關(guān)的政策法規(guī)，嚴(yán)禁發(fā)布色情、暴力、反動(dòng)的言論。

昵稱：

最新評論

------分隔線----------------------------

上一篇：如何給阿里云ECS綁定多個(gè)公網(wǎng)IP
下一篇：解決win10/Windows 10開機(jī)后磁盤占用100%的方法

大家感興趣的內(nèi)容

最近更新的內(nèi)容

9
什么是ipc

10
epic是什么平臺

五月综合缴情婷婷六月,色94色欧美sute亚洲线路二,日韩制服国产精品一区,色噜噜一区二区三区,香港三级午夜理伦三级三