vertical-align

by chuangchen

HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vertical-align</title>
</head>
<body>

<header>
  <h1>vertical-align</h1>
</header>

<div style="background:red; display:inline-block; 
height:100px;
line-height:100px;
vertical-align:middle;
">
  jjj
</div>

 <div class="wrapper">
    <span class="text">垂直居中文本</span>
  </div>
  
</body>
</html>

CSS

body {
  background-color: #eee;
}

:root {
  box-sizing: border-box;
}

*,
::before,
::after {
  box-sizing: inherit;
}

header {
  color: #fff;
  background-color: #0072b0;
  border-radius: 0.5em;
}

.wrapper {
  display: inline-block;
  height: 100px;
  line-height: 100px;
  /* 设置行高和元素高度相同，使内容垂直居中 */
  border: 1px solid black;
}

.text {
  display: inline-block;
  vertical-align: middle;
}