第一种方式:
使用vertical-align属性,但是vertical-align属性只会对拥有valign特性的(X)HTML标签起作用(例如:td,th,caption),但是在CSS中还有一个display属性能够模拟<table>。但是Internet Explorer 6及以下版本并不能真正理解displaydisplay:table和display:table-cell,所以此例子只使用于IE6以上的版本
注意:display:table和display:table-cell的使用方法,前者必须设置在父元素上,后者必须设置在子元素上
Demo:
<!Doctype html>
<html lang="zh-cn">
<head>
<title>我是垂直居中</title>
<meta charset="utf-8" />
<script></script>
<style>
.con {
width: 100%;
height: 300px;
background: pink;
display: table;
}
.txt {
vertical-align: middle;
display: table-cell;
}
</style>
</head>
<body>
<div class="con">
<div class="txt">我要垂直居中</div>
</div>
</body>
</html>