使用css垂直水平居中

不管是新手还是老手，fed们都会遇到水平和垂直居中问题。是一个div居中，水平方向上谁都会，那就是margin: 0 auto。但是垂直居中就需要点技巧了，不过代码也不复杂，下面是同时水平垂直居中的两种方法。
html 片段如下：

<div class="parent">
  <div class="children"></div>
</div>

父元素的css如下：

.parent { position: relative; width: 300px; height: 500px; background-color: red; }

方法1

.children { width: 200px; height: 200px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: green; }

方法2

.children { width: 200px; height: 200px; osition: relative; margin: 0 auto; top: 50%; transform: translateY(-50%); background-color: green; }