Когда мы писали лошадь, мы, вероятно, мало что знали о методе горизонтального и вертикального центрирования. Итак, я дам вам краткий обзор нескольких часто используемых методов горизонтального и вертикального центрирования.
первый метод <!--html код поля--><!--центрировано по горизонтали и вертикали--><div class=Centered1> <p>d первый тип</p></div><!-css часть стиля --> .Centered1{цвет фона: #800070; ширина: 100%; высота: 500 пикселей; положение: относительное } .Centered1 p{ширина: 200 пикселей; 200 пикселей; цвет фона: глубокий розовый; высота строки: 200 пикселей; положение: абсолютное; слева: 0; справа: 0; Второй метод <!--html-код поля--><!--центрирование по горизонтали и вертикали--><div class=Centered2> <p>Тип dSecond</p></div><!-css часть стиля--> / *Второй метод — горизонтальное и вертикальное центрирование*/ .Centered2{ background-color: #ef8518; height: 500px; 200 пикселей; высота: 200 пикселей; высота строки: 200 пикселей; выравнивание текста: по левому краю: 50%; поле по левому краю: -100 пикселей; Третий метод <!--html-код поля--><!--центрировано по горизонтали и вертикали--><div class=Centered3> <p>d третий тип</p></div><!-css часть стиля --> /*Третий метод — горизонтальное и вертикальное центрирование*/ .Centered3{ background-color: dimgrey; width: 100%; height: 500px; 200 пикселей; высота: 200 пикселей; цвет фона: темно-оранжевый; выравнивание текста: по центру: 50%; преобразование: трансляция (-50%,-50%); четвертый метод <!--html код поля--><!--по горизонтали и вертикали по центру--><div class=Centered4> <p>d четвертый тип</p></div><!-css часть стиля--> /*Четвертый метод — горизонтальное и вертикальное центрирование, старая версия гибкого макета*/ .Centered4{ background-color: #FF4444; width: 100%; height: 500px display: -webkit-box; -webkit-box-pack:center; -webkit-box-align: center } .Centered4 p { ширина: 200 пикселей; высота: 200 пикселей; высота строки: 200 пикселей; Пятый метод <!--html код поля--><!--центрировано по горизонтали и вертикали--><div class=Centered5> <p>d пятый тип</p></div><!-css часть стиля--> /*Пятый метод — горизонтальное и вертикальное центрирование, новая версия flex — горизонтальное и вертикальное центрирование*/ .Centered5{ background-color: darkslateblue; width: 100%; height: 500px; display: justify-content:center; ; выравнивание элементов: центр; } .Centered5 p { ширина: 200 пикселей; высота фона: фуксия; высота строки: 200 пикселей;Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.