16 способов понять CSS по горизонтали и по вертикали

CSS

文章结构

1. Горизонтальный центр

1.1 Строчные элементы

.parent {
    text-align: center;
}

1.2 Элементы блочного уровня

1.2.1 Общий метод центрирования блочных элементов

.son {
    margin: 0 auto;
}

1.2.2 Дочерние элементы содержат float

.parent{
    width:fit-content;
    margin:0 auto;
}

.son {
    float: left;
}

1.2.3 Флексбокс

1) гибкая версия 2012

.parent {
    display: flex;
    justify-content: center;
}

2) гибкая версия 2009 г.

.parent {
    display: box;
    box-orient: horizontal;
    box-pack: center;
}

1.2.4 Абсолютное позиционирование

1) трансформировать

.son {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

2) слева: 50%

.son {
    position: absolute;
    width: 宽度;
    left: 50%;
    margin-left: -0.5*宽度
}

3) влево/вправо: 0

.son {
    position: absolute;
    width: 宽度;
    left: 0;
    right: 0;
    margin: 0 auto;
}

резюме

Выше приведены 8 способов центрирования CSS по горизонтали.

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

2.1 Строчные элементы

.parent {
    height: 高度;
}

.son {
    line-height: 高度;
}

Примечание: ① Значение высоты строки дочернего элемента равно значению высоты родительского элемента. ② Одна строка текста.

2.2 Элементы блочного уровня

2.2.1 Встроенные элементы блочного уровня

.parent::after, .son{
    display:inline-block;
    vertical-align:middle;
}
.parent::after{
    content:'';
    height:100%;
}

Адаптируйтесь к IE7.

2.2.2 table

.parent {
  display: table;
}
.son {
  display: table-cell;
  vertical-align: middle;
}

преимущество

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

недостаток

  • Он не работает в IE6~7, даже в бета-версии IE8.

2.2.3 Флексбокс

1) гибкая версия 2012

.parent {
    display: flex;
    align-items: center;
}

преимущество

  • Блок контента имеет произвольную ширину и высоту и изящно переполняется.
  • Может использоваться в более сложных и продвинутых методах компоновки.

недостаток

  • IE8/IE9 не поддерживается.
  • Требуется префикс поставщика браузера.
  • Могут быть некоторые проблемы с рендерингом.

2) гибкая версия 2009 г.

.parent {
    display: box;
    box-orien: vertical;
    box-pack: center;
}

преимущество

  • Простота реализации и высокая масштабируемость.

недостаток

  • Плохая совместимость, не поддерживает IE.

2.2.4 Абсолютное позиционирование

1) трансформировать

.son {
    position: absolute;
    top: 50%;
    transform: translate( 0, -50%);
}

преимущество

  • Меньше кода.

недостаток

  • IE8 не поддерживает его. Атрибуты должны иметь префикс производителя браузера, что может помешать другим эффектам преобразования. В некоторых случаях текст или границы элементов могут отображаться размытыми.

2) верх: 50%

.son {
    position: absolute;
    top: 50%;
    height: 高度;
    margin-top: -0.5高度;
}

преимущество

  • Работает со всеми браузерами.

недостаток

  • Когда у родительского элемента недостаточно места, дочерний элемент может быть не виден (когда окно браузера сжато, полоса прокрутки не появляется).Если дочерний элемент установлен с overflow:auto, когда высоты недостаточно, появится полоса прокрутки.

3) верх/низ: 0;

.son {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
}

преимущество

  • Простой.

недостаток

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

резюме

Выше приведены 8 способов вертикального центрирования CSS, их плюсы и минусы.

3. Резюме

小结
Вышеприведенное суммирует в общей сложности 16 методов горизонтального центрирования и 8 методов вертикального центрирования.

в,

  • flex
  • абсолютное позиционирование

Работает как для горизонтального, так и для вертикального центрирования.

Надеюсь, это помогло вам.

Обсуждения приветствуются.

٩(๑❛ᴗ❛๑)۶

благодарный@ape-casear,@боевой орелИсправление!

Вы также можете лучше резюмировать центрирование CSS!

использованная литература

[1] louis. 16 методов достижения горизонтального и вертикального центрирования [ПР], 20 апреля 2017 г.

[2] Думай медленно и действуй быстро.CSS установить вертикальное центрирование [OL], 2017-09-03.

Категории