CSS定位和居中问题

　　定位和居中问题是CSS中经常遇到的。对于一个定长定高的元素，实现其在父元素中的垂直水平居中，可通过position属性实现。当元素大小可变时，这种方法就失效了，我们可以通过flex和table实现居中，这两种方法今后会细致研究，这里只使用position方法。

　　任务需要完成的效果图如下：

　　相应代码如下：

 1 .main{
 2     position: absolute;
 3     top: 50%;
 4     left: 50%;
 5     width: 400px;
 6     height: 200px;
 7     margin: -100px 0 0 -200px;
 8     background-color: #ccc;
 9 }
10 .corner{
11     position: absolute;
12     width: 50px;
13     height: 50px;
14     background-color: #fc0;
15 }
16 .top-left{
17     top: 0;
18     left: 0;
19     border-radius: 0 0 50px 0;
20 }
21 .bottom-right{
22     bottom: 0;
23     right: 0;
24     border-radius: 50px 0 0 0;
25 }

　　对应的html代码为：

1 <div class="container">
2         <div class="main">
3             <div class="top-left corner"></div>
4             <div class="bottom-right corner"></div>
5         </div>
6 </div>

　　为实现灰色长方形的居中，我们将其position属性设置为absolute，在最开始，我使用的是relative，发现top:50%失效，这是因为50%是相对其父元素高度来说的，而其父元素高度为零。于是我将body和父元素高度设置为100%，依然没有效果（这个疑问还没有解决）。改为absolute后，灰色长方形的偏移是相对页面来说的，实现了垂直居中。

　　最后的两个黄色圆角，道理相似，设置完absolute后，进一步为其设置top，bottom，right，left属性即可。

　　最后贴一下demo  code