position:absolute的容器居中

web页面开发中，最经常是使用的当然要属于容器居中啦，“居中”有时候是一个很简单的问题，但是！有时候也让人苦恼的“牙痒痒”！
HTML代码如下：

<div id="parents">
    <div id="child">child container</div>
</div>

CSS代码（不占据文档流，水平居中）如下：

#parents {
    width: 100%;
    position: relative;
    background-color: pink;
}
#child {
    width: 200px;
    height: 50px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    background-color: #1fb554;
    text-align: center;
}

CSS代码（占据文档流，水平居中）如下：

#parents {
    width: 100%;
    position: relative;
    background-color: pink;
}
#child {
    width: 200px;
    height: 50px;
    margin: auto;
    background-color: #1fb554;
    text-align: center;
}

那如果想要水平垂直居中的话，就要像下面这么写啦~
HTML代码和CSS代码如下：

#content{
    position:absolute;
    width:650px;
    height:298px;
    left:50%;
    top:50%;
    margin-left:-325px;  /*设置为宽度的一半*/
    margin-top:-149px;   /*设置为高度的一半*/
    background-color: pink;
}

<div id="content">HELLO, WORLD!</div>

但是，上面有一个需要注意的地方，就是如果#content有父容器，那么其父容器的position不能设置成relative，否则垂直居中会失效————我学的还不够扎实，具体为什么会失效，我一下也将不出来，若以后长知识了，我再不上去，或者‘米娜桑’有知道的，也可以贴出来~~