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

本文章根据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;
    }