七种CSS3实现水平垂直居中方案 ¶

第一种 ¶

Demo1

html

<div class="container-1">
  <div>
    Demo1
  </div>
</div>
<style>
  .container-1{
    width: 300px;
    height: 300px;
    background: #E6A23C;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .container-1 > div{
    width: 100px;
    height: 100px; 
    text-align: center;
    line-height: 100px;
    font-size: 20px;
    color: #fff;
    background: #F56C6C;				
  } 
</style>

<div class="container-1">
  <div>
    Demo1
  </div>
</div>
<style>
  .container-1{
    width: 300px;
    height: 300px;
    background: #E6A23C;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .container-1 > div{
    width: 100px;
    height: 100px; 
    text-align: center;
    line-height: 100px;
    font-size: 20px;
    color: #fff;
    background: #F56C6C;				
  } 
</style>

第二种 ¶

Demo2

html

<div class="container-2">
  <div>
    Demo2
  </div>
</div>
<style>
  #view{
    width: 300px;
    height: 300px;
    background: #E6A23C;
    margin: 0 auto;
    position: relative;
  }
  #view > div{
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    font-size: 20px;
    color: #fff;
    background: #F56C6C;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom:0;
    margin: auto;
  }
</style>

<div class="container-2">
  <div>
    Demo2
  </div>
</div>
<style>
  #view{
    width: 300px;
    height: 300px;
    background: #E6A23C;
    margin: 0 auto;
    position: relative;
  }
  #view > div{
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    font-size: 20px;
    color: #fff;
    background: #F56C6C;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom:0;
    margin: auto;
  }
</style>

第三种 ¶

Demo3

html

<div class="container-3">
  <div>
    Demo3
  </div>
</div>
<style>
  .container-3{
    width: 300px;
    height: 300px;
    background: #E6A23C;
    margin: 0 auto;
    position: relative;
  }
  .container-3 > div{
    width: 100px;
    height: 100px; 
    text-align: center;
    line-height: 100px;
    font-size: 20px;
    color: #fff;
    background: #F56C6C;			
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
</style>

<div class="container-3">
  <div>
    Demo3
  </div>
</div>
<style>
  .container-3{
    width: 300px;
    height: 300px;
    background: #E6A23C;
    margin: 0 auto;
    position: relative;
  }
  .container-3 > div{
    width: 100px;
    height: 100px; 
    text-align: center;
    line-height: 100px;
    font-size: 20px;
    color: #fff;
    background: #F56C6C;			
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
</style>

第四种 ¶

Demo4

html

<div class="example">
  <div class="container-4">
    <div>
      Demo4
    </div>
  </div>
</div>
<style>
  .container-4{
    width: 300px;
    height: 300px;
    background: #E6A23C;
    margin: 0 auto;
    line-height: 300px;
    text-align: center;
  }
  .container-4 > div{
    text-align: center;
    line-height: 100px;
    font-size: 20px;
    color: #fff;
    background: #F56C6C;	
    display: inline;				
  } 
</style>

<div class="example">
  <div class="container-4">
    <div>
      Demo4
    </div>
  </div>
</div>
<style>
  .container-4{
    width: 300px;
    height: 300px;
    background: #E6A23C;
    margin: 0 auto;
    line-height: 300px;
    text-align: center;
  }
  .container-4 > div{
    text-align: center;
    line-height: 100px;
    font-size: 20px;
    color: #fff;
    background: #F56C6C;	
    display: inline;				
  } 
</style>

第五种 ¶

Demo5

html

<div class="example">
  <div class="container-5">
    <div>
      Demo5
    </div>
  </div>
</div>
<style>
  .container-5{
    width: 300px;
    height: 300px;
    background: #E6A23C;
    margin: 0 auto;
  }
  .container-5 > div{
    width: 100px;
    height: 100px; 
    text-align: center;
    line-height: 100px;
    font-size: 20px;
    color: #fff;
    background: #F56C6C;	
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin-left: auto;
    margin-right: auto ;
  }
</style>

<div class="example">
  <div class="container-5">
    <div>
      Demo5
    </div>
  </div>
</div>
<style>
  .container-5{
    width: 300px;
    height: 300px;
    background: #E6A23C;
    margin: 0 auto;
  }
  .container-5 > div{
    width: 100px;
    height: 100px; 
    text-align: center;
    line-height: 100px;
    font-size: 20px;
    color: #fff;
    background: #F56C6C;	
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin-left: auto;
    margin-right: auto ;
  }
</style>

第六种 ¶

Demo6

html

<div class="example">
  <div class="container-6">
    <div>
      Demo6
    </div>
  </div>
</div>
<style>
  .container-5{
    width: 300px;
    height: 300px;
    background: #E6A23C;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 100px
  }
  .container-5 > div{
    width: 100px;
    height: 100px; 
    text-align: center;
    line-height: 100px;
    font-size: 20px;
    color: #fff;
    background: #F56C6C;	
  }
</style>

<div class="example">
  <div class="container-6">
    <div>
      Demo6
    </div>
  </div>
</div>
<style>
  .container-5{
    width: 300px;
    height: 300px;
    background: #E6A23C;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 100px
  }
  .container-5 > div{
    width: 100px;
    height: 100px; 
    text-align: center;
    line-height: 100px;
    font-size: 20px;
    color: #fff;
    background: #F56C6C;	
  }
</style>

第七种 ¶

Demo7

html

<div class="example">
  <div class="container-7">
    <div>
      Demo7
    </div>
  </div>
</div>
<style>
  .container-7{
    width: 300px;
    height: 300px;
    background: #E6A23C;
    margin: 0 auto;
    display: table;	
    text-align: center;
  }
  .container-7 > div{
    font-size: 20px;
    color: #fff;
    background: #F56C6C;	
    display: table-cell;
    vertical-align: middle;				
  } 
</style>

<div class="example">
  <div class="container-7">
    <div>
      Demo7
    </div>
  </div>
</div>
<style>
  .container-7{
    width: 300px;
    height: 300px;
    background: #E6A23C;
    margin: 0 auto;
    display: table;	
    text-align: center;
  }
  .container-7 > div{
    font-size: 20px;
    color: #fff;
    background: #F56C6C;	
    display: table-cell;
    vertical-align: middle;				
  } 
</style>