Css 文字垂直方向居中整理

一、Css 文字垂直方向居中整理

瀏覽器在渲染文字的時候，默認就是從左往右，從上往下的方式排列文字。Css提供了屬性可以改變這種排列方式。

關於css塊元素，垂直方向居中參考：CSS網頁布局垂直居中整理

關於文字排列參考：CSS3網頁布局之文字布局和文字超出處理

 

二、單行文字垂直方向居中，height+line-height

設置元素的行高和元素的高度相同，實現單行文字居中。

html

    <div class="line line1">
        微信小程序
        小程序是當前最流行，體驗度最高的企業服務工具，宣傳工具，值得擁有！

        企業網站
        專業制作各類高質量pc網站,手機網站,h5網站, 專業的服務,讓客戶的產品更具價值.
    </div>

    <div class="line line2">
        微信小程序
        小程序是當前最流行，體驗度最高的企業服務工具，宣傳工具，值得擁有！

        企業網站
        專業制作各類高質量pc網站,手機網站,h5網站, 專業的服務,讓客戶的產品更具價值.
    </div>

css

        .line {
            border: 1px solid red; height: 100px;
            padding: 0px 10px;
            margin: 30px 30px 0px 30px;
            /*單行處理*/
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .line2 {
             /*行高和元素高度相同*/ line-height: 100px;
        }

 

展示結果：

 

 

三、多行文字垂直方向居中，table-cell+vertical-align

使用table單元格模式，設置多行文字垂直居中自適應。

html

內容同上。

css

        .line {
            border: 1px solid red;
            height: 150px;
            padding: 0px 10px;
            margin: 30px 30px 30px 30px;
            overflow: hidden;
        }

        .line2 {
            /*多行文字垂直居中*/ display: table-cell; vertical-align: middle;
        }

顯示結果：

 

四、使用塊居中實現，Flex + align-items

flex布局的

align-items:center;/*垂直方向居中*/

justify-content: center; /*水平居中*/

html

    <div class="line line1">
        微信小程序
        小程序是當前最流行，體驗度最高的企業服務工具，宣傳工具，值得擁有！

        企業網站
        專業制作各類高質量pc網站,手機網站,h5網站, 專業的服務,讓客戶的產品更具價值.
    </div>

    <div class="line line2">
        <div class="inner">
            微信小程序
            小程序是當前最流行，體驗度最高的企業服務工具，宣傳工具，值得擁有！
    
            企業網站
            專業制作各類高質量pc網站,手機網站,h5網站, 專業的服務,讓客戶的產品更具價值.
        </div>
    </div>

css

 

        .line {
            border: 1px solid red;
            height: 150px;
            padding: 0px 10px;
            margin: 30px 30px 30px 30px;
            overflow: hidden;
        }
        .line2 { display: flex; align-items:center;/*垂直方向居中*/
        }
        .line2 .inner{
            border: 1px solid blue;
        }

 

5.其他垂直方向居中方式，請留言討論或者 加wx: tianma102

 

更多：

Css 文字垂直方向居中整理

Css 標題效果常見整理（二）邊線框系列、

Css 標題效果常見整理（一）背景系列