How to horizontal & vertical center a div? [duplicate]

问题

Here is the source code:

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

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

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

I would like to know How to make the div (id inner), horizontal & vertical center? I can horizontal center, but can't make a vertical center... Thank you.

回答1:

If you know the dimensions of the inner div you can use CSS.

#outer {
    position: relative;
}

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

There are other options using display: table-cell and vertical-align: middle etc.

Other options include JavaScript to dynamically determine the dimensions of the inner div and set the negative margins like above.

回答2:

use javaScript or try with http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

回答3:

You have to use display: table-cell;, vertical-align: middle; to accomplish this without Javascript.

回答4:

I guess you want a div to align vertical and horizontal center have dynamic height and width in all browsers.

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:

The easiest and most reliable way to do it is with JavaScript. Try the code given in this blog post. Trying to do it in CSS is a nightmare, because CSS was not designed to handle vertical alignment.

回答6:

This satisfies my needs for vertical centering anything http://css-tricks.com/centering-in-the-unknown/. Supports ie8+ and modern browsers

回答7:

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

来源：https://stackoverflow.com/questions/4325643/how-to-horizontal-vertical-center-a-div

标签

html

css

center