如何垂直和水平居中DIV？

我的背景圖片的行爲是，當我調整瀏覽器窗口大小時，圖片始終完全居中。它在頂部，左側，右側和底部與我的瀏覽器窗口的邊緣具有相同的「距離」。如何垂直和水平居中DIV？

的CSS：

background-image: url("ipad.jpg"); 
background-position: 50% 50%; 
background-repeat: no-repeat; 
background-size: 563.5px 800px;

我有一個div覆蓋這個形象，我希望它像背景圖像具有相同的性質，使得它在背景圖片上在同一直居中地點。

這可能嗎？如果是的話。怎麼樣？我希望你明白我想要達到的目標。 :) 非常感謝您的幫助。：D

來源

2012-03-16 TehQuila

無論瀏覽器窗口的大小如何，它看起來像是試圖將內容水平居中或垂直居中。如果是這樣，嘗試這樣的事情：

你的HTML：

<div class="outer"> 
    <div class="middle"> 
     <div class="inner"> 
      The content that you want centered. 
     </div> 
    </div> 
</div>

你的CSS：

/* Vertical and horizontal centering */ 
.outer { 
    position:fixed; 
    top:0; left:0; 
    width:100%; height:100%; 
} 
.middle { 
    height:100%; 
    display:table; 
    margin:0 auto; 
} 
.inner { 
    vertical-align:middle; 
    display:table-cell; 
}

祝你好運！

編輯：這裏是上面的例子 - http://jsbin.com/aguciw

來源

2012-03-16 15:50:56 Ryan

哇好的非常感謝，多數民衆贊成正是我一直在尋找！：d – TehQuila 2012-03-16 15:59:52

如何垂直和水平居中DIV？

回答

相關問題