您現在的位置: 365建站網 > 365學習 > 在html+css中實現文字垂直居中的方法

在html+css中實現文字垂直居中的方法

文章來源:365jz.com     點擊數:197    更新時間:2021-07-17 12:50   參與評論

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

HTML+css中實現文字垂直居中的方法總結如下:

1.使用絕對定位和負外邊距對塊級元素進行垂直居中

css垂直居中效果:


在線測試工具:html在線編輯器

css垂直居中實現代碼:

<!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>

這個方法兼容性不錯,但是有一個小缺點:必須提前知道被居中塊級元素的尺寸,否則無法準確實現垂直居中。

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>

這種方法非常明顯的好處就是不必提前知道被居中的元素的尺寸,因為transform中偏移的百分比就是相對于元素自身的尺寸而言。

3.絕對定位結合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>

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

被居中元素的寬度也可以不設置,但是不設置的話,就必須是圖片這種自身就包含尺寸的元素,否則無法實現。

4.使用padding實現子元素的垂直居中

<!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>

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

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

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;
            /*實現垂直居中*/
            align-items: center;
            /*實現水平居中*/
            justify-content: center;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="child">
            我是測試DIV
        </div>
    </div>
</body>
</html>

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

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

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

flex-start:交叉軸的起點對齊;flex-end:交叉軸的重點對齊;

center:交叉軸的重點對齊;baseline項目第一行文字的基線對齊;

strech(該值是默認值):如果項目沒有設置高度或者設置為auto,那么將占滿整個容器的高度。

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;
            /*實現垂直居中*/
            align-items: center;
            /*實現水平居中*/
            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>

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

row(該值為默認值):主軸為水平方向,起點在左端;

row-reverse,主軸是水平方向,起點在有端;

column主軸為垂直方向,起點在上沿;

column-reverse:主軸為垂直方向,起點在下沿。

justify-content屬性定義了項目在主軸上的對齊方式,可能取的值有五個,分別如下(不過具體的對齊方式與主軸的方向有關,以下的值都是假設主軸為從左到右的):

flex-staart(該值是默認值):左對齊;

flex-end:右對齊;

center:居中對齊;

space-between:兩端對齊,各個項目之間的間隔均對齊;

space-around:各個項目兩側的間隔相等。

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

<!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>

這里有一個小坑需要大家注意:line-height(行高)的值不能設為100%;我們來看看官網文檔中給出的關于line-height取值為百分比時候的描述:基于當前字體尺寸的百分比行間距,所以大家就明白了,如果是百分比是相對于字體尺寸來講的。

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

<!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>

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

valign屬性規定單元格中內容的垂直排列方式,語法:<tdvalign="value">,value的可能取值有四種:

top:對內容進行上對齊

middle:對內容進行居中對齊

bottom:對內容進行下對齊

baseline:基線對齊

關于baseline值:基線是一條虛構的線。在一行文本中,大多數字母以基線為基準。baseline值設置行中的所有表格數據都分享相同的基線。該值的效果常常與bottom值相同。不過,如果文本的字號各不相同,那么baseline的效果會更好。

9.CSS3的box方法實現水平垂直居中

<!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中實現文字垂直居中的方法,希望對你有幫助!


如對本文有疑問,請提交到交流論壇,廣大熱心網友會為你解答??! 點擊進入論壇


發表評論 (197人查看,0條評論)
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
用戶名: 驗證碼: 點擊我更換圖片
最新評論
------分隔線----------------------------
365建站网-快速批量建站_企业免费建站_智能建站软件系统_在线建站和seo工具
久久视频| 开车视频疼痛有声音| 日本真人做人爱视频免费观看| 99热亚洲精品无码观看| chinese中年熟妇free| 美女翘臀强进入系列在线观看| 曰本女人牲交免费视频| 男生肌肌桶女人肌肌| xxx中国熟妇xxx| 日本特黄特黄刺激大片| 按摩强奷在线播放| 欧美专区| 姐姐的朋友| 九九厕所偷拍精品视频| 色欧美片视频在线观看| 大波美女牲交图片| 精液黄色| 欧美18vivodexxx| 美国一级片| 性欧美德国极品极度另类| 青青草网站| 日本一本之道高清不卡免费| 日本黄色片| 久久超碰国产精品| http://www.donpoho.com