Как горизонтальный и вертикальный центр div?

Вот исходный код:

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

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

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

Я хотел бы знать, как сделать div (id внутренний), горизонтальный и вертикальный центр? Я могу горизонтальный центр, но не могу сделать вертикальный центр... Спасибо.

Ответы

Ответ 1

Если вы знаете размеры внутреннего 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 и установки отрицательных полей, как указано выше.

Ответ 2

используйте javaScript или попробуйте с http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Ответ 3

Самый простой и надежный способ сделать это с помощью JavaScript. Попробуйте ввести код this в блоге. Попытка сделать это в CSS - это кошмар, потому что CSS не был предназначен для обработки вертикального выравнивания.

Ответ 4

Чтобы выполнить это без Javascript, вы должны использовать display: table-cell;, vertical-align: middle;.

Ответ 5

Я думаю, вы хотите, чтобы 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%;
}

Ответ 6

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

Ответ 7

Это удовлетворяет мои потребности в вертикальном центрировании чего-либо http://css-tricks.com/centering-in-the-unknown/. Поддержка ie8 + и современных браузеров