欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

讓DIV水平垂直居中的兩種完美方法推薦

  發(fā)布時(shí)間：2016-03-15 16:47:05   作者：佚名   我要評(píng)論
下面小編就為大家?guī)?lái)一篇讓DIV水平垂直居中的兩種完美方法推薦。一起跟隨小編過(guò)來(lái)看看吧。希望給大家一個(gè)參考
今天寫(xiě)的了百度前端學(xué)院春季班的任務(wù)：定位和居中問(wèn)題  由于距離上次學(xué)習(xí)CSS有點(diǎn)久遠(yuǎn)了，加上以前木有記筆記的習(xí)慣，方法忘得只剩下一種，今天通過(guò)網(wǎng)上查閱資料總結(jié)了以下兩種簡(jiǎn)單的方法讓DIV水平垂直居中。=。=
先來(lái)個(gè)效果圖：

HTML代碼：


復(fù)制代碼
代碼如下:

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

CSS：
CSS Code復(fù)制內(nèi)容到剪貼板
  1. .main{   
  2.     width: 400px;   
  3.     height: 200px;   
  4.     overflow: hidden;   
  5.     background-color: #ccc;   
  6.     position: absolute;   
  7. }   
  8. .yuan{   
  9.     width: 100px;   
  10.     height: 100px;   
  11.     background-color:yellow;   
  12.     border-radius: 50%;   
  13.     -moz-border-radius: 50%;   
  14.     -webkit-border-radius: 50%;   
  15.     position: absolute;   
  16. }   
  17. #left{   
  18.     top: -50px;   
  19.     left: -50px;   
  20. }   
  21. #right{   
  22.     bottombottom: -50px;   
  23.     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è)參考，也希望大家多多支持腳本之家。

原文鏈接：http://www.cnblogs.com/lsiria/p/5279890.html

相關(guān)文章

最新評(píng)論