【筆記】讓DIV水平垂直居中的兩種方法

今天寫的了百度前端學院春季班的任務：定位和居中問題  由於距離上次學習CSS有點久遠了，加上以前木有記筆記的習慣，方法忘得只剩下一種，今天通過網上查閱資料總結了以下兩種簡單的方法讓DIV水平垂直居中。=。=

先來個效果圖：

HTML代碼：

<div class="wrap">
    <div class="main first">
        <div id="left" class="yuan"></div>
        <div id="right" class="yuan"></div>
    </div>
</div>

CSS：

.main{
    width: 400px;
    height: 200px;
    overflow: hidden;
    background-color: #ccc;
    position: absolute;
}
.yuan{
    width: 100px;
    height: 100px;
    background-color:yellow;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    position: absolute;
}
#left{
    top: -50px;
    left: -50px;
}
#right{
    bottom: -50px;
    right: -50px;
}

 

第一種方法：利用負margin，前提是需要知道尺寸。兼容性最好。

設定水平和垂直偏移父元素的50%，
再根據實際長度將子元素上左挪回一半大小

.first{
    top: 50%;
    left: 50%;
    margin-left: -200px;
    margin-top: -100px;
}

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

.second{
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}