1. .main{        width: 400px;   
2.     height: 200px;        overflow: hidden;   
3.     background-color: #ccc;        position: absolute;   
4. }    .yuan{   
5.     width: 100px;        height: 100px;   
6.     background-color:yellow;        border-radius: 50%;   
7.     -moz-border-radius: 50%;        -webkit-border-radius: 50%;   
8.     position: absolute;    }   
9. #left{        top: -50px;   
10.     left: -50px;    }   
11. #right{        bottombottom: -50px;   
12.     rightright: -50px;   

第一種方法：利用負(fù)margin，前提是需要知道尺寸。兼容性最好。
設(shè)定水平和垂直偏移父元素的50%，再根據(jù)實(shí)際長(zhǎng)度將子元素上左挪回一半大小

復(fù)制代碼代碼如下:
.first{
     top: 50%;
     left: 50%;
     margin-left: -200px;
     margin-top: -100px;
 }

第二種方法：利用CSS3的transform，寬度不定，支持IE9+

復(fù)制代碼代碼如下:
.second{
     left: 50%;
     top: 50%;
     transform: translate(-50%,-50%);
 }
以上這篇讓DIV水平垂直居中的兩種完美方法推薦就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持錯(cuò)新站長(zhǎng)站。