Резюме схемы центрирования настроек CSS - очень полная

CSS

Несколько дней назад интервью у компании, я спросил по пути вертикально, я только ответил на три вида запаса, таблица-клетки, Flex. После возвращения я чувствую себя особенно смущенным, поэтому я организую запись плана, чтобы сделать запись, я надеюсь помочь всем. Если вы пишете не так, добро пожаловать, чтобы исправить, большое спасибо.

Изменено на 4 февраля 2021 года и скорректировано по общепринятой в настоящее время схеме.

Раздел HTML-кода

элемент блочного уровня

<div class="parent">
   <div class="child">child</div>
</div>

встроенный элемент

<div class="parent">
   <span class="child">child</span>
</div>

Центрировано по горизонтали

01 Строчные элементы text-align: center;

.parent {
   text-align: center;
}

поля элементов 02-го уровня: авто;

(Для браузеров более ранних версий также необходимо установитьtext-align: center;)

.parent {
    text-align: center; 
}
.child {
    width: 100px;
    margin: auto; 
    border: 1px solid blue;
}

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

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

01 Встроенные элементы (однострочный текст с вертикальным центрированием): установите высоту строки = высота

Очень часто используется, в основном используется для набора текста, а также может использоваться для центрирования элементов изображения.

.parent {
   height: 200px;
   line-height: 200px;
   border: 1px solid red;
}

02 Элементы уровня блока: display: flex

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

.parent {
    width: 600px;
    height: 200px;
    border: 1px solid red;
    display: flex;
    align-items: center;
    justify-content: center;  /*水平居中*/
}
.child {
    background: blue;
}

03 Элементы уровня блока: абсолютное позиционирование + поле: авто;

Достоинства: не нужно заранее знать размер, хорошая совместимость
Недостатки: раньше этот метод был одним из моих любимых, но теперь абсолютное позиционирование устарело.absolutТеперь, если вы все еще используете IE для разработки, этот метод более рекомендуется.
Этот метод взят из блога учителя Zhangxin Xu.Небольшой совет: margin:auto обеспечивает горизонтальное и вертикальное центрирование абсолютно позиционированных элементов.

.parent {
    position: relative;
    height: 200px;
}
.child {
    width: 80px;
    height: 40px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: blue;
}

04 Элементы уровня блока: отображение: таблица-ячейка

Преимущества: Это также лучшая реализация, более лаконичная.

.parent {
    width: 600px;
    height: 200px;
    border: 1px solid red;
    display: table;
}
.child {
    display: table-cell;
    vertical-align: middle;
}

или:

Этот план был замечен на Zhihu.В исходном тексте говорилось, что это был план команды Taobao:

Какие есть хорошие решения для вертикального центрирования элементов с помощью CSS? - Ответ Джино - Зная
В блоге учителя Чжан Синь Сюй также упоминается:
Несколько известных мне приложений display:table-cell

.parent {
    height: 300px;
    border: 1px solid red;
    display: table-cell;
    vertical-align: middle;
    /* *display: block;
    *font-size: (heightX0.873);
    *font-family: arial; */
}

То же самое относится к вертикальному центрированию многострочного текста.

HTML-код:

<div class="parent">
    <span class="child">child child child child child child child child child child child child child child child child child child child childchild child child </span>
</div>

CSS-код:

.parent {
    width: 400px;
    height: 300px;
    display: table-cell;        
    vertical-align: middle;
    border: 1px solid red;
}
.child {
    display: inline-block;
    vertical-align: middle;
    background: blue;
}

05 Элементы уровня блока: абсолютное позиционирование (необходимо заранее знать размер)

недостаток:

  1. нужно знать заранееchildразмер,margin-top: -(高度的一半); margin-left: -(宽度的一半);
  2. Абсолютное позиционирование устарелоabsolute, особенно на мобильных устройствах.

преимущество: Совместимость хорошая, и это можно расценивать как небольшую хитрость.

.parent {
    position: relative;
    height: 200px;
}
.child {
    width: 80px;
    height: 40px;
    background: blue;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -20px;
    margin-left: -40px;
}

06 Элементы уровня блока: абсолютное позиционирование + преобразование

Преимущество: нет необходимости знать размер заранее
Недостатки: Совместимость посредственная

.parent {
    position: relative;
    height: 200px;
}
.child {
    width: 80px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: blue;
}

07 Элементы уровня блока: заполнение

Недостаток: если высота фиксирована, размер необходимо рассчитать заранее (применимо только в некоторых конкретных случаях).

.parent {
    padding: 5% 0;
}
.child {
    padding: 10% 0;
    background: blue;
}

08 Элементы блочного уровня: псевдоэлементы

Это решение впервые видно из статьи блоггера:

CSS: детальное изучение горизонтального и вертикального центрирования с использованием псевдоэлементов.
Затем я обнаружил, что в статье Учителя Чжан Синьсюй также упоминается:
:after псевдокласс + классический пример создания контента контента

.parent {
    width: 300px;
    height: 300px;
    border: 1px solid red;
    text-align: center;
}
.child {
    background: blue;
    width: 100px;
    height: 40px;
    display: inline-block;
    vertical-align: middle;
}
.parent::before {
    content: '';
    height: 100%;
    display: inline-block;
    vertical-align: middle;            
}

09 Элементы уровня блока: calc()

Тоже хороший способ.
Недостатки: Вам нужно знать размер дочернего элемента, и вам нужно его рассчитать Аналогично, если вы все еще используете IE, это не рекомендуется.

.parent {
    width: 300px;
    height: 300px;
    border: 1px solid red;
    position: relative;
}
.child {
    width: 100px;
    height: 100px;
    background: blue;
    padding: -webkit-calc((100% - 100px) / 2);
    padding: -moz-calc((100% - 100px) / 2);
    padding: -ms-calc((100% - 100px) / 2);
    padding: calc((100% - 100px) / 2);
    background-clip: content-box;
}

10 элементов блочного уровня: изменить на встроенный блок: встроенный блок +vertical-align: middle;

HTML-код:

<div class="parent">
    <div class="child">child</div>
    <div class="brother">brother</div>
</div>

CSS-код:

.parent {
    width: 400px;
    height: 400px;
    border: 1px solid red;
    position: relative;
}
.child, .brother {
    display: inline-block;
    vertical-align: middle;
}
.child {
    background: blue;
    font-size: 12px;
}
.brother {
    height: 400px;
    font-size: 0;
}

разное

Конечно, есть и другой способ, который заключается в использовании макета таблицы:

<table>
     <tr>
         <td align="center" valign="middle">content</td> 
     </tr>
 </table>

Поскольку в HTML также необходимо добавлять такие теги, как таблица, существует много избыточности, и структура также изменилась.

Категории