vertical-align 用法定義 該屬性定義行內元素(或者行內塊---一般也會把行內塊當做行內元素看待)的基線相對於該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。這會使元素降低而不是升高。
在表單元格中，這個屬性會設置單元格框中的單元格內容的對齊方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用vertical-align讓行內塊元素垂直居中</title>
<style>
*{
margin: 0; padding: 0;
}
.box{
width: 1200px;
height: 300px;
background-color: pink;
line-height: 300px;
}
.contain{
width: 600px;
height: 100px;
background: red;
display: inline-block;
vertical-align: middle;
/* vertical-align只作用在行內（行內塊）元素，所以要轉變模式 */
line-height: 100px;
/* 行內元素（尤其是文字）相關的css屬性具有繼承性，
這個地方設置line-height 是為了消除父級的影響
*/
}
</style>
</head>
<body class="zhuce">
<section class="box">
<section class="contain">我要垂直居中</section>
</section>
vertical-align該屬性定義行內元素(或者行內塊---一般也會把行內塊當做行內元素看待)的基線相對於該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。這會使元素降低而不是升高。
在表單元格中，這個屬性會設置單元格框中的單元格內容的對齊方式。
</body>
</html>