Как выровнять слой DIV по центру страницы?

Допустим у нас есть страница на которой нужно выровнивать слой DIV по центру вместе с текстом.

Есть несколько вариантов.

  1. Вариант №1 Классический

    Выравнивание DIV по центру вариант №1

     <head>
  <meta charset="utf-8">
  <title>Выравнивание слоя по центру</title>
  <style>
   .center {
    width: 200px; /* Ширина элемента в пикселах */
    padding: 10px; /* Поля вокруг текста */
    margin: auto; /* Выравниваем по центру */
    background: #fc0; /* Цвет фона */
   }
  </style>
 </head>
 <body>
  <div class="center">
   Текст.
  </div>
 </body>
  2. Вариант №2 Использование "устаревшего" тэга <center> 
    <body>
    <center>
  <div style="
    background: #1b31ce;
    width: 100px;
    height: 100px;
">Текст</div>
  </center>
</body>
  3. Вариант №3 Выравнивает текст и слой по центру используя table-cell Пример

    Выравнивание DIV по центру вариант №3

    <body>
  <div style="
  height: 500px;
  ">
    <div class="div-table" style="
    display: table;
    width: 100%;
    height: 100%;
    background: #7f7f86;
    ">

      <div class="div-table-cell" style="
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        ">

          <div class="title" style="
          background: #adc525;
          ">Пример текста 
          </div>
      </div>  
    </div>
  </div>
</body>
Рейтинг: 0/5 - 0 голосов

Комментарии ()