CSS布局——全屏居中

全屏显示并居中的方法：

代码：

<div id="parent">这是父元素
  <div id="child">这是子元素</div>
</div>


----------


html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
#parent {
  height: 100%;
  margin: 0;
  border: 10px solid yellow;
}
#child {
  position: absolute;
  top: 50%;
  left: 50%;
  right: 0;
  bottom: 0;
  transform: translate(-50%, -50%);
  border: 10px solid red;
}

效果：

子元素，也就是红框中的内容可以自由增删，然而子元素依旧可以居中。