(1)、垂直居中-父元素高度确定的单行文本
设置父元素的height和line-height高度一致
注:
height是指该元素的高度,line-height是指行间距。
line-height与font-size的计算值之差,在CSS成为行间距,分为两半,分别加到一个文本行内容的顶部和底部。
弊端:
当文字长度大于块的宽度时,就有内容脱离了块。
(自己想的)另外:
对于单行文本,要想设置合理的行间距和元素高度,需满足((line-height )-(font-size ))/2<=height-font-size
代码:
<!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>
(2)、垂直居中-父元素高度确定的多行文本(方法一)
使用table(包括tbody,tr,td标签),同时设置vertical-align:middle
注:
td标签默认情况下就设置了vertical-align:middle属性,所以不需要显式的设置了。
CSS中有一个垂直居中的属性vertical-align,在父元素设置此样式时,会对inline-block类型的子元素都有用。
代码:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>父元素高度确定的多行文本</title>
<style>
.wrap{height:300px;background:#ccc}
.wrap1{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>
<!--下面是代码任务区-->
<table>
<tbody>
<tr><td class="wrap1">
<div>
<img src="http://img.mukewang.com/54ffac56000169c001840181.jpg" title="害羞的小女生"/>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
(3)、垂直居中-父元素高度确定的多行文本(方法二)
设置块级元素的display为table-cell(设置为表格单元显示),激活vertical-align属性。
注:
在chrome、firefox、IE8以上的浏览器可以用这种方法,但IE6\7不支持。兼容性差。
好处:
不用添加多余的无意义的标签
缺点:
兼容性不是很好;
而且这样修改display的block变成了table-cell,破坏了原有的块状元素的性质。
代码:
<!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*/
}
.container1{
height:300px;
background:#ccc;
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>
</head>
<body>
<div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div>
<!--下面是代码任务区-->
<div class="container1">
<img src="http://img.mukewang.com/54ffac56000169c001840181.jpg" title="害羞的小女生"/>
</div>
</body>
</html>