table让元素垂直居中的布局⼩技巧
通过给⽗元素设置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 {html怎么让所有内容居中
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>