Как выровнять слой 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>
    	

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

    563