垂直居中小记 line-height table vertical-align：middle

Posted 2020-10-07 SONLY_s

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了垂直居中小记 line-height table vertical-align：middle相关的知识，希望对你有一定的参考价值。

垂直居中分两种情况：1.父元素高度确定的单行文本 2.以及父元素高度确定的多行文本。

　　1.垂直居中-父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的，即此时单行文本的行高line-height=height(父元素块高度)。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的基线间的距离 )。

line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。

但是有一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块：

#sy{
    margin-top:20px;
    text-align:center;
    height:50px;
    line-height:50px;
    width:200px;
    font-size:20px;
    background:#F30;}


<div id="sy">你看我是不是超出了父块元素？</div>

所以这种方法用于网页的页眉或者页脚还是很不错的

　　2.垂直居中-父元素高度确定的多行文本

　　　　方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。

　　　　　　　　css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。

　　　　　　　　（td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。）

.jz{
       height:200px;
　　　　background:yellow;
    }

<table><tbody><tr><td class="jz">
<div>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>

　　　　方法2：通过设置父元素块为：display:table; 子元素为：display:table-cell;vertacal:middle;来让多行文本达到垂直居中效果（类似方法1）

　　　　　　　　table：此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。

　　　　　　　　table-cell ： 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）

例子1：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多行水平垂直居中</title>
    <style type="text/css">
        .no1{
            display: table;
            height: 300px;
            border: 2px solid blue;
            text-align: center;
        }
        .no2{
            
            display: table-cell;
            vertical-align: middle;
            
        }
        
    </style>

</head>
<body>
    <div class="no1">
        <div class="no2">
            <p>搞事情搞事情搞事情</p>
            <p>要打架是不是？</p>
            <p>一百块都不给我！</p>
        </div>
        
    </div>
</body>
</html>

例子2：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多行垂直水平居中2</title>
    <style type="text/css">
        #no1{
            display: table;
            height: 300px;
            border:  2px solid black;
            text-align: center;
        }
        #no1 p{
            font-size: 20px;
            display: table-cell;
            vertical-align: middle;

        }
    </style>
</head>
<body>
    <div id="no1">
        <p>
            搞事情搞事情搞事情<br>打架是不是？<br>一百块都不给我！
        </p>
    </div>
    
</body>
</html>

　　两个例子有不同，剩下的思考思考，动动脑子，总不会有坏处,思考留评论让我看看你们的想法哇

以上是关于垂直居中小记 line-height table vertical-align：middle的主要内容，如果未能解决你的问题，请参考以下文章

实现icon和文字垂直居中的两种方法－（vertical-align and line-height）