如何水平和垂直居中div？

5

使用JavaScript或嘗試用http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

來源

2010-12-01 15:02:14 slobodan

1

做到這一點與JavaScript的最簡單，最可靠的方式。嘗試在this博客文章中給出的代碼。試圖在CSS中實現它是一場噩夢，因爲CSS並不是用來處理垂直對齊的。

來源

2010-12-01 15:05:30 syrion

11

如果你知道內部div的尺寸，你可以使用CSS。

#outer { 
    position: relative; 
} 

#inner { 
    position: absolute; 
    width: 200px; 
    height: 200px; 
    left: 50%; 
    top: 50%; 
    margin-top: -100px; 
    margin-left: -100px; 
}

還有其他的選擇使用display: table-cell和vertical-align: middle等

其他選項包括JavaScript來動態地確定所述內div的尺寸並設置負邊距等的上方。

來源

2010-12-01 15:06:09 skajfes

1

您必須使用display: table-cell;,vertical-align: middle;才能完成此操作，而不需要使用Javascript。

來源

2011-06-08 14:34:49 ricosrealm

0

<!doctype html> 
<html> 
<head> 
<title>Centered Image Gallery</title> 
<style type="text/css"> 

/* Use height:100% for top-level containers for fluid height */ 
html, body, .container, .placeholder { height: 100%;} 

/* Set image dimensions and offsets */ 
img { width:16px; height:16px; margin-left: 20px; margin-top: 10px; } 

/* Use text-align:center for content container for fluid horizontal centering */ 
.container { text-align:center; } 

/* Use width of less than 100% for Firefox and Webkit */ 
.wrapper { width: 50%; } 

/* Use vertical-align:middle for fluid vertical centering */ 
.placeholder, .wrapper, .content { vertical-align: middle; } 

/* Use inline-block for wrapper and placeholder so vertical-align works */ 
.placeholder, .wrapper { display: inline-block; } 

/* Use min-width to make the inner container a responsive block element */ 
.fixed { min-width: 1px; } 

/* Use display:inline so text-align works */ 
.content { display:inline; } 

@media, 
{ 
.wrapper { display:inline; } 
} 
</style> 

</head> 
    <body> 
    <div class="container"> 
    <div class="content"> 
     <div class="wrapper"> 
      <div class="fixed"> 
      <img src="http://microsoft.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://microsoft.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
     </div> 
     </div> 
    </div> 
    <span class="placeholder"></span> 
</div> 

</body> 
</html>

來源

2012-06-22 00:41:35

0

這滿足了我對垂直居中任何東西的需求http://css-tricks.com/centering-in-the-unknown/。支持ie8 +和現代瀏覽器

來源

2012-08-30 08:49:09 jubalm

1

我想你想要一個div來對齊垂直和水平中心在所有瀏覽器中都有動態的高度和寬度。

jSfiddle

HTML

<div class="main"> 
    <div class="contentWrapper"> 
     <div class="content">My Content </br> Goes here</div> 
    </div>   
</div>

CSS

.main { 
    border: 1px solid #f00; 
    height: 400px; 
    width: 400px; 
    position: relative 
} 
.contentWrapper { 
    display: table; 
    width: 100%; 
    height: 100%; 
    *height: auto; 
    *position: absolute; 
    *top: 50%; 
} 
.content { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
    *position: relative; 
    *top: -50%; 
}

來源

2012-11-22 09:06:19 Tarun

如何水平和垂直居中div？

回答

相關問題