純CSS實現多行文字垂直居中幾種方法解析

時間 2019-11-17

標籤 css 實現文字垂直居中幾種方法解析欄目 CSS 简体版

原文原文鏈接

　　場景：父元素高度固定，如何使其中的文字垂直居中？css

一、table佈局：html

　　利用display:table+display:table-cell的方法前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style> .middle-box{ display: table; /*重點*/ height: 300px;border: 1px solid #000; } /*重點：table-cell佈局*/ .middle-inner{ display: table-cell; vertical-align:middle; text-align:center; } </style>
<body>
<div class="middle-box">
    <div class="middle-inner">
        <p><span class="suc-tip">前端開發博客，專一前端開發和web教程</span><br/><span class="suc-link">快捷入口：<a href="http://caibaojian.com">http://caibaojian.com</a></span></p>
        <p style=""><span class="suc-tip">5年的老博客，一直致力於WEB開發</span></p>
    </div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style> .middle-box{ display: table; /*重點*/ height: 300px;border: 1px solid #000; } /*重點：table-cell佈局*/ .middle-inner{ display: table-cell; vertical-align:middle; text-align:center; height: 200px; border:1px solid #000; } </style>
<body>
<div class="">
    <div class="middle-inner">
        <p><span class="suc-tip">前端開發博客，專一前端開發和web教程</span><br/><span class="suc-link">快捷入口：<a href="http://caibaojian.com">http://caibaojian.com</a></span></p>
        <p style=""><span class="suc-tip">5年的老博客，一直致力於WEB開發</span></p>
    </div>
</div>
</body>
</html>

效果：web

　　利用display:table-cell佈局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>css居中對齊</title>
    <style>  
        *{padding: 0;margin:0;font-size: 12px;} div{display: table-cell;width: 200px;height:150px;border:1px solid blue;vertical-align: middle;} </style>
    <div>  
        <span>測試文字測試文字</span>  
    </div>  
    <div> 測試文字測試文字 </div>  
    <div>  
        <p>測試文字測試文字</p>
        <p>測試文字測試文字</p>
    </div>  
</body>
</html>

　　效果：測試

　　優勢：等高佈局，無需設置高度，文字輕鬆實現垂直居中spa

　　缺點：ie7如下不兼容！code

二、利用line-height和vertical-align：htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>css居中對齊</title>
    <style>  
        *{padding: 0;margin:0;font-size: 12px;} div{float: left;width: 200px;height:200px;margin: 10px;border:1px solid #000; line-height: 200px;} span{display: inline-block;vertical-align: middle;line-height: 22px;} </style>
    <div>  
        <span>測試文字測試文字</span>  
    </div>  
    <div>  
        <span>測試文字 <br/> 測試文字<br/> 測試文字<br/> 測試文字<br/> 測試文字<br/> 測試文字</span>  
    </div>
</body>
</html>