jal
/
WebTest


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>padding实现子元素的垂直居中</title>
  <style>
    #box {
      width: 300px;
      background: #ddd;
      padding: 100px 0;
    }

    #child {
      width: 200px;
      height: 100px;
      background: orange;
    }
  </style>
</head>

<body>
  <h1>padding实现子元素的垂直居中</h1>
  <p>
    这种实现方式非常简单，给父元素设置相等的上下内边距，子元素自然是垂直居中的，当然这时候父元素是不能设置高度的，要让它自动被填充起来，除非设置了一个正好等于上内边距+子元素高度+下内边距的值，否则无法精确垂直居中。
    这种方式看似没有什么技术含量，但其实在某些场景下也是非常好用的。
  </p>
  <div id="box">
    <div id="child"></div>
  </div>

</body>

</html>