Подробное объяснение решения вертикального центрирования в HTML5.

В CSS вы можете жаловаться. Вы можете использовать поля: 0 auto; для достижения горизонтального центрирования, но поле: auto 0 не может обеспечить вертикальное центрирование.

Основная причина здесь в том, что родительский элемент управления, то есть сам элемент управления, расположен неправильно. Глядя непосредственно на код, сначала вам нужно использовать относительную компоновку для родительского элемента управления, а затем вам нужно использовать абсолютную компоновку для дочерних элементов управления и использовать атрибуты верхнего и нижнего уровня в сочетании с полем: auto 0;, чтобы добиться эффект.

 .container-vertical {позиция: относительная; высота: 200 пикселей; фон: глубокий синий; маржа-дно: 20 пикселей;} .container-vertical-item { позиция: абсолютная; высота: 80 пикселей; выравнивание: по центру; фон: желтый; высота строки: 80 пикселей; верх: 0; поле: авто; 0;}

Центрировано по вертикали.png

Имея опыт версии 5.2, мы можем попытаться установить для свойств left, right, top и low дочернего элемента управления значение 0, а также автоматические поля Margin: auto во всех четырёх направлениях. Такого эффекта можно добиться. Подэлементы управления, которые необходимо отметить, должны иметь атрибут display:block;

Посмотрите на код

 .container-horization-vertical {позиция: относительная; высота: 200 пикселей; фон: deepskyblue; маржа-дно: 20 пикселей;} .container-horization-vertical-item { позиция: абсолютная; ширина: 150 пикселей; 80 пикселей; фон: желтый; высота строки: 80 пикселей; выравнивание текста: по центру: 0; 0; внизу: 0; справа: 0; поле: авто;}

Резюме: Это решение по-прежнему очень хорошо подходит для решения некоторых не очень сложных макетов страниц и может быть адаптировано к любому интерфейсу и практически ко всем браузерам. Но для очень сложных страниц могут потребоваться другие решения, но вы также можете черпать вдохновение из этой идеи.

Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.