Как я могу вертикально и горизонтально центрировать div внутри большего div? - PullRequest
Новая
       0

Как я могу вертикально и горизонтально центрировать div внутри большего div?

3 голосов
/ 16 августа 2010

Как горизонтально центрировать

Мне удалось отцентрировать горизонтально, используя стилизацию из принятого ответа.Как я могу также расположить его вертикально?Внутренний div имеет неизвестную высоту.

Ответы [ 2 ]

7 голосов
/ 16 августа 2010

От: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Universal vertical center with CSS</title>
  <style>
    .greenBorder {border: 1px solid green;} /* just borders to see it */
  </style>
</head>

<body>
  <div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
    <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
      <div class="greenBorder" style=" #position: relative; #top: -50%">
        any text<br>
        any height<br>
        any content, for example generated from DB<br>
        everything is vertically centered
      </div>
    </div>
  </div>
</body>
</html>
0 голосов
/ 26 февраля 2016

Вот классная техника для центрирования коробки по вертикали и по горизонтали:

Внешний контейнер

  • должен иметь display: table;

Внутреннийконтейнер

  • должен иметь display: table-cell;
  • должен иметь vertical-align: middle;
  • должен иметь text-align: center;

Поле содержимого

  • должен иметь display: inline-block;
  • должен заново отрегулировать горизонтальное выравнивание текста, например.text-align: left; или text-align: right;, если вы не хотите, чтобы текст центрировался

Элегантность этого метода заключается в том, что вы можете добавлять свой контент в поле контента, не заботясь о его высоте илиширина!

Просто добавьте свой контент в поле контента.

Демо 

body {
    margin : 0;
}

.outer-container {
    position : absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding : 20px;
    border : 1px solid #000;
}
<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        <p>You can put anything here</p>
        <p>Yes, really anything!</p>
     </div>
   </div>
</div>

См. Также эту скрипку !

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...