通过给父元素设置display:table,然后给子元素设置display:table-cell,vertical-align:middle可以实现子元素的内容水平垂直居中,下面代码实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css" rel="stylesheet">
.table {
display: table;
margin: 5px;
width: 500px;
height: 300px;
background-color: #ccc;
}
.cell {
display: table-cell;
padding: 10px;
vertical-align: middle;/*该属性是定义行内元素垂直对齐的,只有行内元素会生效。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。*/
}
</style>
</head>
<body>
<div class="table">
<div class="cell">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dicta eligendi eum, expedita illum laboriosam laborum magni minima minus necessitatibus nihil numquam optio, quas quo repudiandae saepe similique? Corporis, mollitia.</div>
</div>
</body>
</html>