前端定位和居中

任务注意事项：

思考不同情况下(如灰色高度是根据内容动态变化的)水平垂直居中的 解决方案。

动手试一试各种情况的组合，父元素和子元素分别取不同的 position 值。思考 position 属性各种取值的真正含义，尤其是 absolute 究竟是相对谁而言的。

注意测试不同情况，尤其是极端情况下的效果。

调节浏览器宽度，灰色元素始终水平居中。

调节浏览器高度，灰色元素始终垂直居中。

调节浏览器高度和宽度，黄色扇形的定位始终准确。

在之前的一篇博客里，我有总结过如何使p垂直居中，其中一种方法就是使用的position定位。给父级原素设置：position：relative，给要垂直居中的子元素设置：position：absolute，top：50%，margin-top：-1/2*height(大概就是这样的)。

所以看到这个任务我先想到的就是这样做，但是这里不需要给父元素设置position：relative，下面将详细介绍：

代码：

 <p class="content">
        <p class="left_top"></p>
        <p class="right_bottom"></p>
   </p>

样式：

.content{
    /*相对于谁？*/
    position: absolute;
    top:50%;
    left: 50%;
    width: 400px;
    height: 200px;
    margin-top: -100px;
    margin-left: -200px;
    background-color: #ccc;
}
.left_top{
    /*相对于谁*/
    position: absolute;
    top:0;
    left: 0;
    background-color: yellow;
    width: 50px;
    height: 50px;
    border-radius: 0 0 50px 0;
}
.right_bottom{
    position: absolute;
    bottom:0;
    right: 0;
    background-color: yellow;
    width: 50px;
    height: 50px;
    border-radius:50px 0 0 0;
}

这里三个p都是设置的position：absolute。那么他们的参考分别是谁呢?这是问题的关键。看到有的资料是这样说的：position:absolute是相对于他的包含块中第一个有position:absolute或者position:relative属性的父级元素，如果都没有，就是相对于body。

也就是说，content是相对于body定位的，但是left_top和right_bottom都是相对于content定位的。这样才能使得content始终在页面中间(水平，垂直)，因为他是相对于body定位。两个扇形则始终在content的左上角和右下角(因为他们是相对于content定位的)