logo标签列表

如何使一个div水平垂直居中

htmlcsscenter
18

这是源代码：

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

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

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

如何使id为inner的div水平和垂直居中？

我可以水平居中，但我无法垂直居中...

7个回答
15

如果你知道内部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的尺寸并设置负边距，就像之前的答案所示。

6
2

你需要使用 display: table-cell;, vertical-align: middle; 来实现此目标，而无需使用 JavaScript。

2

我猜你想要一个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%;
}
1

最简单、最可靠的方法是使用JavaScript。尝试使用这篇博客文章中提供的代码。

在CSS中尝试实现垂直对齐是一场噩梦，因为CSS并不是为处理垂直对齐而设计的。

1
<!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>
0

这满足了我对于任何垂直居中的需求在未知条件下的居中。它支持Internet Explorer 8（及更高版本）和现代浏览器。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接