垂直和水平對齊（中間和中心）與css

Question

我正在練習CSS，我很困惑如何強制我的div元素在我的頁面中心（垂直和水平）（意思是跨瀏覽器的方式或方式兼容性）？

此致敬禮！

Answer 1

有許多方法：元件的固定措施

CSS

<div style="width:200px;height:100px;position:absolute;left:50%;top:50%; 
margin-left:-100px;margin-top:-50px;"> 
<!–content–> 
</div> 

---

1. 中心的水平和垂直對齊。中心水平和文字

   CSS

   <div style="width:400px;height:200px;text-align:center;line-height:200px;"> 
   <!–content–> 
   </div> 
   

   ---

   3的垂直一條線。中心的元素的水平和垂直對齊，沒有具體措施

   CSS

   <div style="display:table;height:300px;text-align:center;"> 
   <div style="display:table-cell;vertical-align:middle;"> 
   <!–content–> 
   </div> 
   </div> 
   

   ---

   這裏更多：Horizontal and Vertical Alignment in CSS

Answer 2

This blog post介紹中心一個div兩種方法在水平和垂直。一個只使用CSS，並將與具有固定大小的div一起工作;另一個使用jQuery，並將預先爲您不知道大小的div工作。

我複製從博客帖子的演示這裏的CSS和jQuery的例子：

CSS

假設你有一個類.classname的DIV，下面的CSS應該工作。

left:50%; top:50%;將div的左上角設置爲屏幕中心; margin:-75px 0 0 -135px;將其移動到左側，並分別向上移動固定大小div的寬度和高度的一半。

.className{ 
    width:270px; 
    height:150px; 
    position:absolute; 
    left:50%; 
    top:50%; 
    margin:-75px 0 0 -135px; 
} 

jQuery的

$(document).ready(function(){ 
    $(window).resize(function(){ 
     $('.className').css({ 
      position:'absolute', 
      left: ($(window).width() - $('.className').outerWidth())/2, 
      top: ($(window).height() - $('.className').outerHeight())/2 
     }); 
    }); 
    // To initially run the function: 
    $(window).resize(); 
}); 

這裏有一個demo of the techniques in practice。

Answer 3

這並不像人們所期望的那樣容易 - 如果你知道容器的高度，你只能做垂直對齊。如果是這種情況，你可以用絕對定位來完成。

概念是將頂部/左側位置設置爲50％，然後使用負邊距（設置爲高度/寬度的一半）將容器拉回到居中位置。

例子：http://jsbin.com/ipawe/edit

基本CSS：

#mydiv { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    height: 400px; 
    width: 700px; 
    margin-top: -200px; /* -(1/2 height) */ 
    margin-left: -350px; /* -(1/2 width) */ 
    } 

Answer 4

本網站給出了垂直居中的DIV一些選項：http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Answer 5

現在有一個更好的解決方案：Vertical align anything with just 3 lines of CSS