Главная страница  /  Занятия  /  #4  /  Горизонтальное и вертикальное центрирование элементов

Горизонтальное и вертикальное центрирование элементов

Задание:

Рассказать о горизонтальном и вертикальном центрировании элементов.

Горизонтальное центрирование:

Центрирование инлайновых элементов достигается установкой родительскому элементу text-align: center. Блочные элементы центрируются по горизонтали при помощи margin: auto.

Файл index.html:

   <!DOCTYPE html>
   
   <html lang="ru">
   
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Горизонтальное центрирование</title>
     <link rel="stylesheet" href="styles.css">
    </head>
   
    <body>
     <div class="inlineContainer">Текст</div>
     <div class="blockContainer">
      <div class="innerContainer">Текст</div>
     </div>
    </body>
   
   </html>

Файл styles.css:

   .inlineContainer		{ text-align: center; border: 1px solid red; }
   .blockContainer		{ margin-top: 20px; border: 1px solid green; }
   .innerContainer		{ width: 100px; border: 1px solid blue; margin: auto; text-align: center; }

Результат:

Пример горизонтального центрирования можно посмотреть здесь.

Вертикальное центрирование:

Вертикальное центрирование можно осуществить тремя основными способами:

Файл index.html:

   <!DOCTYPE html>
   
   <html lang="ru">
   
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Вертикальное центрирование</title>
     <link rel="stylesheet" href="styles.css">
    </head>
   
    <body>
     <div class="outerContainer">
      <div class="innerContainer">Текст</div>
     </div>
     <div class="outerTableCellContainer">
      <div class="innerTableCellContainer">Текст</div>
     </div>
     <div class="outerFlexboxContainer">
      <div class="innerFlexboxContainer">Текст</div>
     </div>
    </body>
   
   </html>

Файл styles.css:

   .outerContainer			{ width: 100%; height: 200px; border: 1px solid red; position: relative; margin-bottom: 20px; }
   .innerContainer			{ height: 18px; margin-top: -9px; position: absolute; top: 50%; border: 1px solid blue; }
   .outerTableCellContainer		{ width: 500px; height: 500px; display: table-cell; vertical-align: middle; border: 1px solid red; }
   .innerTableCellContainer		{ width: 100px; border: 1px solid green; }
   .outerFlexboxContainer		{ display: flex; justify-content: center; align-items: center; height: 100px; width: 100%; margin-top: 20px; border: 1px solid black; }
   .innerFlexboxContainer		{ border: 1px solid red; }

Результат:

Пример вертикального центрирования можно посмотреть здесь.