Center div center vertical: How To Center an Element Vertically

Leave a Comment / Разное / By /

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

  • Сообщение от Академия LearnPOD
  • Категории Кодирование, CSS, HTML
  • Дата 7 июня 2021 г.

В этом кратком уроке я покажу вам, как отцентрировать элемент div по вертикали и горизонтали внутри другого элемента div.

Я также покажу вам, как индивидуально центрировать div по горизонтали или по вертикали, предполагая, что у вас есть поле с фиксированной шириной и гибкой высотой.

Есть разные способы добиться этого, но я собираюсь поделиться некоторыми.

Однако имейте в виду, что есть некоторые способы, которые могут в конечном итоге преследовать вас в ходе поддержки вашего кода, поэтому будьте осторожны с методами, которые вы выбираете.

Прежде чем мы продолжим, эти решения, которые я собираюсь показать вам, должны работать во всех основных браузерах.

Горизонтально и вертикально Center Div

Приведенный ниже код централизует ваш div как по горизонтали, так и по вертикали, тем самым переместив дочерний div в середину родительского div.

Обратите внимание: используйте предпочтительный размер ширины.

 
<голова>
<стиль>
.outerDiv {
    высота: 100%;
    ширина: 100%;
    дисплей: таблица;
    положение: абсолютное;
}
 
.middleDiv {
    высота: 100%;
    ширина: 100%;
    вертикальное выравнивание: посередине;
    отображение: таблица-ячейка;
}
 
.innerDiv {
    поле слева: авто;
    поле справа: авто;
    width: /*любая ширина, которую вы хотите сохранить*/;
}


<тело>
<дел>
    <дел>
        <дел>
             
Заголовок
 
            
Здесь размещен некоторый динамический контент...
как отцентрировать div по горизонтали и вертикали

Горизонтально Централизировать Div

С помощью CSS мы центрируем внутренний div по горизонтали.

Использование приведенного ниже кода только централизует дочерний элемент div по горизонтали и не устанавливает вертикальное выравнивание. Ваш div будет автоматически выровнен по верху.

 
<голова>
<стиль>
.outerDiv {
    высота: 100%;
    ширина: 100%;
    дисплей: таблица;
    положение: абсолютное;
}
.innerDiv {
    width: /* Укажите любую ширину, меньшую или % от содержащего div */
    поле: 0 авто;
}
 
/* Если вы ориентируетесь на IE8+, лучше использовать ниже*/
 
.innerDiv {
    дисплей: таблица;
    поле: 0 авто;
}


<тело>
<дел>
    <дел>
 
направляясь сюда
 
        
Содержимое будет здесь...