一个定位和居中问题的探讨

本文章根据IFE（百度前端技术学院）第一阶段任务四总结整理

任务四：定位和居中问题

实现效果图：

HTML代码：

    <div class="container">
        <div class="top-left-round"></div>
        <div class="bottom-right-round"></div>
    </div>

CSS代码一：

   * { margin: 0; padding: 0; }
    .container{ width:400px; height:200px; background:#ccc; position:absolute; top:50%; left:50%; margin:-100px 0 0 -200px; }
    .top-left-round{ width:50px; height:50px; border-bottom-right-radius:50px; background:#fc0; }
    .bottom-right-round{ width:50px; height:50px; border-top-left-radius:50px; background:#fc0; float:right; position:relative; bottom:-50%; right:0; }

CSS代码二：

    * { margin: 0; padding: 0; }
    .container { position: absolute; width: 400px; height: 200px; background-color: #ccc; top: 50%; margin-top: -100px; left: 50%; margin-left: -200px; }
    .left-top-round { width: 50px; height: 50px; border-radius: 0 0 50px 0; position: absolute; background-color: #FC0; }
    .right-bottom-round { width: 50px; height: 50px; border-radius: 50px 0 0 0; position: absolute; background-color: #FC0; right: 0; bottom: 0; }

CSS代码三：当在元素不定宽高的情况下，即随着浏览器窗口的变化，宽高也随之改变。

  *{margin:0; padding:0;}
    .container{ background: #ccc; position:absolute; position: absolute; top: 25%; left: 25%; bottom:25%; right: 25%; }
    .top-left-round{ width: 50px; height: 50px; background: #fc0; border-radius: 0 0 100% 0; position: absolute; left: 0; top: 0; }
    .right-bottom-round{ width: 50px; height: 50px; background: #fc0; border-radius: 100% 0 0 0; position: absolute; bottom:0;right:0; }

补充实现水平居中，垂直居中定位的几种方法

• position方法：见CSS1及CSS2；

• Flex布局方法：

 *{ padding:0; margin:0; }
      html,body{ width: 100%; height: 100%; }
    .container{ width:100%; height:100%; display: -webkit-flex; display: flex; justify-content:center; align-items:center; }

• Table方法：

    *{ padding:0; margin:0; }
    html,body{ width: 100%; height: 100%; }
    .wrap{ width: 100%; height:100%; display: table; }
        .content{ display: table-cell; vertical-align: middle; }