使用table和table-call布局
將表格作為一個table表，使用table-cell定義每個單元格的布局為table-cell,
拋出display的有效值
單元格中間的間隔使用
border-spacing:10px; border-collapse: separate;
定義單元格
vertical-align: middle; display: table-cell;
代碼源碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.block{
display: table;
border-spacing:10px;
border-collapse: separate;
}
.box {
margin: 10px;
border: 1px solid #f00;
background-color: #eee;
width: 33%;
height: 400px;
vertical-align: middle;
display: table-cell;
}
.text {}
</style>
<body>
<div class="block">
<div class="box">
<div class="text">
我是多行文字我是多行文字是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是>多行文字我是多行文字
</div>
</div>
<div class="box">
<div class="text">
我是多行文字我是多行文字是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是>多行文字我是多行文字
</div>
</div>
<div class="box">
<div class="text">
我是多行文字我是多行文字是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是>多行文字我是多行文字
</div>
</div>
</div>
</body>
</html>
效果如下
