How to horizontal & vertical center a div [duplicate]_问答_开发者

This question already has answers here: How can I horizontally center an element? (133 answers) Center a DIV horizontally and vertically [duplicate] (6 answers) Closed 9 years ago.

Here is the source开发者_StackOverflow中文版 code:

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

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

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

How do I make the div (id inner), horizontal & vertical center?

I can horizontal center, but I can't make a vertical center...

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 the previous answers.

Use JavaScript or try with Vertical Centering in CSS.

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%;
}

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

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

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.

This satisfies my needs for vertical centering anything Centering in the Unknown. It supports Internet Explorer 8 (and later) and modern browsers.