如何水平和垂直居中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？

回答

相关问题