css布局：块级元素的居中

一.定宽：

1.定位居中(absolute)

方法一：

html:
<div class="main"></main>

css:
.main{
  400px;
  height:200px;
  background:#eee;
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-200px;
  margin-top:-100px;
}

方法二：

html:

<div class="main"></div>
css:

body {
    height: 100%;
}
.main{
  400px;
   height: 200px; 
  background:#eee;
  position:absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

二.非定宽：

1.定位居中(absolute+translate)

html:

<div class="main">
    hello world
</div>
css:

.main{
  background:#eee;
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
}

2.flex布局

html:

    <body>
        <div class="main">
        </div>
    </body>
css:

html,body{
     100%;
    height: 100%;
    display: -webkit-flex;
    display: flex;
    justify-content:center;
    align-items:center;
}
.container{
     400px;
    height: 200px;
    background: #ccc;
}

3.table

html:

<body>
    <div class="container">
        <div class="main">
            <div class="inner"></div>
        </div>
    </div>
</body>
css:

 
html,body{
     height: 100%;
}
.container{
    100%;
    height:100%;        
    display: table;
}
.main {
    display: table-cell;
    vertical-align: middle;
}
.inner{
     400px;
    height: 200px;
    background: #ccc;
    margin:0 auto;
}