一个给定高度为100像素的容器的div节点,如何使得里面的文字垂直居中?
<!DOCTYPE html>
<html>
<head>
<title>文字垂直居中</title>
<style type="text/css">
/*方法一:当只有一行或几个文字,让文字的行高和容器的高度相同即可;*/
/* .parent{background-color:yellow;height:100px;text-align: center;line-height:100px;} */
/*方法二 absolute+transform*/
/*.parent{position:relative;height:100px;background-color:yellow;}
.child{position:absolute;top:50%;transform:translateY(-50%);}*/
/* 方法三 table-cell+vertical-align*/
.parent{display:table;background-color:yellow;height:100px;}
.child{display:table-cell; vertical-align:middle;}
</style>
</head>
<body>
<div class="parent"><div class="child">111111111111111111111111111</div></div>
</body>
</html>
方法二和方法三同样适用于子元素于父元素垂直居中且(子元素与父元素)高度均可变。
方法二(absolute+transform):优点:绝对定位脱离文档流,不会对后续元素的布局造成影响。但如果绝对定位元素是唯一的元素,则父元素也会失去高度。
缺点:transform为css3属性,有兼容问题
方法三:兼容性好(支持IE8,以下版本需要调整页面结构至table)