盒子居中问题

html简单模板：

<div class="container">
    <div class="box"></div>
</div>

View Code

1.父盒子、子盒子均固定宽高

　　A.父盒子相对定位，子盒子绝对定位(垂直水平居中)

.container{
    width: 600px;
    height: 500px;
    position: relative;
    border: 1px solid black;

}
.box{
    width:100px;
    height: 200px;
    background: beige;
    position: absolute;
    top:50%;
    left:50%;
    margin-left: -50px;
    margin-top: -100px;
}

View Code

　　B.父盒子相对定位，子盒子绝对定位（垂直水平居中）

.container{
            width: 600px;
            height: 500px;
            position: relative;
            border: 1px solid black;

        }
        .box{
            width:100px;
            height: 200px;
            background: beige;
            position: absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
           margin: auto;
        }

View Code

　 C.通过margin控制

.container{
            width: 600px;
            height: 500px;
            border: 1px solid black;
        }
        .box{
            width:100px;
            height: 200px;
            margin: 150px auto;
            background: beige;
        }

View Code

2.子盒子不固定宽高，父盒子默认100%table

　　A.通过table-cell（要配合display：table；table-row【不必须】；只有一行一列父盒子百分比不起作用，当多行才起作用）----（垂直水平居中）

  html,body{
            width: 100%;
            height: 100%;
            display: table;
        }
        .container{
            display: table-cell;
            /*width和height设百分比是不起作用的，单行单列相当于单元格都是100%撑满盒子表格的*/
            /* 70%;*/
            /*height: 80%;*/
            border: 1px solid black;
            vertical-align: middle;
        }
        .box{
            width:50%;
            height: 50%;
            background: beige;
            margin: 0 auto;
        }

View Code

问题table-cell草案：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>center</title>
  <style>
    html, body {
      width: 100%;
      height: 100%;
    }
    
    .fa {
      width: 500px;
      height: 300px;
      display: table;
    }
    .tr1{
      display: table-row;
      height: 30%;
    }
    .td1 {
      display: table-cell;
      width: 20%;
      border: 1px solid black;
      vertical-align: middle;
      padding: 5px;
    }
    
    .td2 {
      display: table-cell;
      width: 70%;
      border: 1px solid black;
      vertical-align: middle;
      padding: 5px;
    }
    
    .td3 {
      display: table-cell;
      border: 1px solid black;
      vertical-align: middle;
      padding: 5px;
    }
    
    .tr2{
      display: table-row;
      
    }
    .th{
      display: table-cell;
      border: 1px solid red;
    }
  </style>
</head>
<body>
<div class="fa">
  
  <div class="tr1">
    <div class="td1">
      <div class="box">td1</div>
    </div>
    <div class="td2">
      <div class="box">td2</div>
    </div>
    <div class="td3">
      <div class="box">td3</div>
    </div>
  </div>
  
  <div class="tr2">
    <div class="th">
      <div class="box">td1</div>
    </div>
    <div class="th">
      <div class="box">td2</div>
    </div>
    <div class="th">
      <div class="box">td3</div>
    </div>
  </div>
 
</div>

</body>
</html>

View Code

3.父盒子，子盒子，固定or不固定均可

　　A.flex布局（有兼容问题）--（水平垂直居中）

 html,body{
            width: 100%;
            height: 100%;
            display: table;
        }
        .container{
            display: -webkit-flex;
            display: flex;
            -webkit-align-items: center;
            align-items: center;
            -webkit-justify-content: center;
            justify-content: center;
            width: 80%;
            height: 70%;
            /* 600px;*/
            /*height: 500px;*/
            border: 1px solid #000;
            margin: auto;
        }
        .box{
            /* 200px;*/
            /*height: 200px;*/
            width: 50%;
            height: 50%;
            background-color: #0ff;
        }

View Code

　　B.translate(webkit兼容问题) --（水平垂直居中）

 html,body{
            width: 100%;
            height: 100%;
            display: table;
        }
        .container{
            position: relative;
            /* 600px;*/
            /*height: 600px;*/
            width: 70%;
            height: 100%;
            border: 1px solid #000;
            margin: auto;
        }
        .box{
            position: relative;
            /*相对于父元素位置*/
            top: 50%;
            left: 50%;
            /* 200px;*/
            /*height: 200px;*/
            width: 40%;
            height: 40%;
            /*相对于自身元素*/
            transform: translate(-50%, -50%);  
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            background-color: #0ff;
        }

View Code

4.子盒子不确定宽高，父盒子固定or不固定均可

　　A.定位（水平垂直居中）

 html,body{
            width: 100%;
            height: 100%;
            display: table;
        }
        .container{
            position: relative;
            /* 600px;*/
            /*height: 500px;*/
            width: 100%;
            height: 100%;
            border: 1px solid #000;
            margin: auto;
        }
        .box{
            position: absolute;
            left: 30%;
            right: 30%;
            top: 30%;
            bottom: 30%;
            background-color: #0ff;
        }

View Code

5.button居中

默认button垂直居中，所以只要控制水平居中。例如margin：0 auto；