HTML笔记：垂直居中—父元素高度确定文本

Sakwe

2018 年 09 月 15 日

5472 次浏览

暂无评论

2420字数

html

我们在实际工作中也会遇到需要设置垂直居中的场景，比如好多报纸的文章标题在左右一侧时，常常会设置为垂直居中，为了用户体验性好。

这里我们又得分两种情况：父元素高度确定的单行文本，以及父元素高度确定的多行文本。
本节我们先来看第一种父元素高度确定的单行文本, 怎么设置它为垂直居中呢？

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

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

这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。

<div class = "container">
hello world!
</div>

CSS代码：

<style>
.container{
heighet:100px;
line-height:100px;
background:#999;
}
</style>

DEMO 示例;

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>垂直居中</title>
<style>
.wrap h2{
    margin:0;
    height:100px;
    line-height:100px;
    background:#ccc;
}
</style>
</head>
<body>
<!--下面是代码任务部分-->
<div class="wrap">
    <h2>hi,imooc!</h2>
</div>
</body>
</html>

父元素高度确定的多行文本，图片等的竖直居中的方法有两种：

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

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

HTML代码：

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

CSS代码：

table  td{height:500px;  background:#ccc}

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

DEMO示例:

<!DOCTYPE HTML>
<html>
<head>
<meta  charset="utf-8">
<title>父元素高度确定的多行文本</title>
<style>
  .wrap{height:300px;background:#ccc}
  table td{height:300px;background:#ccc}
</style>
</head>
<body>
<table><tbody><tr><td class="wrap">
<div>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
<!--下面是代码任务区-->
<div>
    <img src="http://img.mukewang.com/54ffac56000169c001840181.jpg" title="害羞的小女生"/>
</div>
</body>
</html>

2、除了上一节讲到的插入table标签，可以使父元素高度确定的多行文本垂直居中之外，本节介绍另外一种实现这种效果的方法。但这种方法兼容性比较差，只是提供大家学习参考。

在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式, 兼容性比较差；

HTML代码：

<div class="container">
    <div>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
    </div>
</div>

CSS代码：

<style>
.container{
    height:300px;
    background:#ccc;
    display:table-cell;/*IE8以上及Chrome、Firefox*/
    vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>

注意：这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7而且这样修改display的block变成了table-cell，破坏了原有的块状元素的性质。

DEMO示例：

<!DOCTYPE HTML>
<html>
<head>
<meta  charset="utf-8">
<title>父元素高度确定的多行文本</title>
<style>
.container{
    height:300px;
    background:#ccc;
    
    display:table-cell;/*IE8以上及Chrome、Firefox*/
    vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>

<style>
    .images{
        height:300px;
        background:#ccc;
        display:table-cell;
        vertical-align:middle;
}
</style>
</head>

<body>
<div class="container">
    <div>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
    </div>
</div>
<!--下面是代码任务区-->
<div class = "images">
    <img src="http://img.mukewang.com/54ffac56000169c001840181.jpg" title="害羞的小女生"/>
</div>
</body>
</html>