如何横向和垂直中心一个div？

时间：2010-12-01 14:59:34

标签： html css center

以下是源代码：

<div id = "outer">
     <div id="top">
     ....
     </div>

     <div id="inner">
     ....
     </div>

     <div id="bottom">
     ....
     </div>     
</div>

我想知道如何制作div（id inner），horizo​​ntal＆amp;垂直中心？我可以横向居中，但不能建立垂直中心......谢谢。

7 个答案:

答案 0 :(得分：13)

如果你知道内部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等。

其他选项包括用于动态确定内部div的尺寸的JavaScript，并设置如上所述的负边距。

答案 1 :(得分：6)

使用javaScript或尝试使用http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

答案 2 :(得分：2)

您必须使用display: table-cell;，vertical-align: middle;才能在不使用 Javascript 的情况下完成此操作。

答案 3 :(得分：1)

最简单，最可靠的方法是使用JavaScript。试试this博文中给出的代码。尝试在CSS中做这件事是一场噩梦，因为CSS并不是为处理垂直对齐而设计的。

答案 4 :(得分：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%;
}

答案 5 :(得分：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>

答案 6 :(得分：0)

这满足了我对垂直居中任何事物http://css-tricks.com/centering-in-the-unknown/的需求。支持ie8 +和现代浏览器

相关问题
最新问题