[Breaking Liver Interview Series] Правильный способ открытия вертикального центрирования CSS

CSS опрос

web-css-gaoji-jichu.jpeg

Предисловие Hammer Interviewer Artifact — CSS

Будь то в реальной разработке или на собеседованиях, вертикальное центрирование css часто является темой, которую невозможно избежать.Многие интервьюеры перенесли несколько двойных ударов без хорошей контратаки.Просто объединив обиды и боли, которые я испытал в прошлом, я дам всем шанс разбить интервьюеров.

   На самом деле вертикальное центрирование в основном делится на два вида:Ширина и высота центрированного элемента известныа такжеШирина и высота центрированного элемента неизвестны, то мы объединим эти два типа, чтобы привести пример один за другим.

    css 垂直居中.png

Ширина и высота центрированного элемента известны

1. absolute + margin auto

Как следует из названия, он использует текущий элементposition: absolute;а такжеmargin: auto;

Обратите внимание на использование этого метода: должна быть установлена ​​высота родительского элемента и текущего элемента;

Установив расстояние во всех направлениях до 0,marginУстановить какauto

Конкретный код выглядит следующим образом:

.parent{
  position: relative;
  width: 90vw;
  height: 90vh;
  border: 3px solid steelblue;
}

.child{
  background: tomato;
  width: 50vw; height: 50vh;
  /* 核心代码 */
  position:absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  margin: auto;
}

image-20210729232149048.png

Конкретный код выглядит следующим образом:

.parent{
  position:relative;
  width: 90vw;
  height: 90vh;
  border: 3px solid steelblue;
}

.child{
  background: tomato;
  width: 100px; height: 100px;
  /* 核心代码 */
  position:absolute;
  top: 50%; left: 50%;
  margin-top: -50px;
  margin-left: -50px;
}

Конкретные эффекты следующие:

image-20210729232317142.png

3. absolute + calc

Используйте функцию расчета CSS3 для расчета; метод аналогичен вышеуказанному

Конкретный код выглядит следующим образом:

.parent{
  width: 90vw;
  height: 90vh;
  border: 3px solid steelblue;
  /* 核心代码 */
  position:relative;
}

.child{
  background: tomato;
  width: 200px; height: 200px;
  /* 核心代码 */
  position:absolute;
  top: calc(50% - 100px);
  left: calc(50% - 100px);
}

Конкретные эффекты следующие:

image-20210729232434257.png

Ширина и высота центрированного элемента неизвестны

4. absolute + transform

Воспользуйтесь преимуществами новых возможностей CSS3transform;потому чтоtransformизtranslateЕсли значением атрибута является процент, то процент будет рассчитываться на основе его собственной ширины и высоты.

Конкретный код выглядит следующим образом:

.parent{
  width: 90vw;
  height: 90vh;
  border: 3px solid steelblue;
  /* 核心代码 */
  position:relative;
}

.child{
  background: tomato;
  /* 核心代码 */
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Конкретные эффекты следующие:

image-20210729232624466.png

5. line-height + vertical-align

Элемент устанавливается на текущие встроенные элементы, и при предоставлении родительского элемента text-align: center;добиться горизонтального центрирования;

В то же время, установив текущий элементvertical-align: middle;добиться вертикального центрирования;

Наконец, установите текущий элементline-height: initial;наследовать от родительского элементаline-height.

Конкретный код выглядит следующим образом:

.parent{
  width: 90vw;
  border: 3px solid steelblue;
  /* 核心代码 */
  line-height: 500px;
  text-align: center;
}

.child{
  background: tomato;
  /* 核心代码 */
  display: inline-block;
  vertical-align: middle;
  line-height: initial;
}

Конкретные эффекты следующие:

image-20210729232748854.png

6. Элемент таблицы таблицы

Горизонтальное и вертикальное центрирование осуществляется через самый классический элемент таблицы, но код выглядит избыточным и не рекомендуется;

Конкретный код выглядит следующим образом:

<table>
  <tbody>
    <tr>
      <td class="parent">
        <div class="child"></div>
      </td>
    </tr>
  </tbody>
</table>

<style>
  .parent {
    width: 90vw;
    height: 90vh;
    border: 3px solid steelblue;
    /* 核心代码 */
    text-align: center;
  }
  .child {
    background: tomato;
    /* 核心代码 */
    display: inline-block;
  }
</style>

Конкретные эффекты следующие:

image-20210729233002861.png

Если вы должны использоватьtabletableЕсли элементы, тоcss-table

Конкретный код выглядит следующим образом:

.parent{
  width: 90vw;
  height: 90vh;
  border: 3px solid steelblue;
  /* 核心代码 */
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.child{
  background: tomato;
  /* 核心代码 */
  display: inline-block;
}

Конкретные эффекты следующие:

image-20210729233055305.png

8. гибкий макет (1)

Сказать, что сейчас популярнее и использовать больше схем компоновки, то негибких нет, то два самых распространенных способа~

прямо вflex-containerОчень элегантно, чтобы быть достигнуты несколькими строками кода

Конкретный код выглядит следующим образом:

.parent {
  width: 90vw;
  height: 90vh;
  border: 3px solid steelblue;
  
  /* 核心代码 */
  display: flex;
  justify-content: center;
	align-items: center;
}
.child{
  background: tomato;
}

justify-content

align-items

Конкретные эффекты следующие:

image-20210729233155581.png

существуетflex-item

Конкретный код выглядит следующим образом:

.parent{
  width: 90vw;
  height: 90vh;
  border: 3px solid steelblue;
  
  /* 核心代码 */
  display: flex;
}

.child{
  background: tomato;
  
  /* 核心代码 */
  margin: auto;
}

Конкретные эффекты следующие:

image-20210729233243684.png

два метода flex используют компромиссы по вашему желанию

Поставляется с изображением совместимости flex

image-20210725020146492.png

10. макет сетки сетки (1)

Считается, что макет сетки редко используется в реальных проектах, в основном потому, что макет слишком продвинут, что приводит к не столь идеальной совместимости, но нельзя отрицать, что возможности сетки определенно являются качественным скачком в макете css.

Не знаком с деталями учителя может выглядеть Ruan YifengРуководство по началу работы

CSS Gridсодержит сFlexboxпрактически одинаковые параметры выравнивания, поэтому мы можемgrid-containerэлегантная реализация

Конкретный код выглядит следующим образом:

.parent{
  width: 90vw;
  height: 90vh;
  border: 3px solid steelblue;
  /* 核心代码 */
  display: grid;
  align-items: center;
  justify-content: center;
}

.child{
  background: tomato;  
}

Конкретные эффекты следующие:

image-20210729233416689.png

11. сетка макет сетки (2)

Точно так же мы можем сделать что-то вродеFlexboxто же, вgrid-itemэлегантная реализация

Конкретный код выглядит следующим образом:

.parent{
  width: 90vw;
  height: 90vh;
  border: 3px solid steelblue;
  /* 核心代码 */
  display: grid
}

.child{
  background: tomato;
  /* 核心代码 */
  align-self: center;
  justify-self: center;
}

Конкретные эффекты следующие:

image-20210729233458535.png

два метода flex используют компромиссы по своему усмотрению

Поставляется с изображением совместимости сетки

image-20210725020025034.png

Суммировать

После изучения 11 вертикальных центрирующих методов макета выше, давайте кратко обобщены

  • если ваш проектТребования совместимости на стороне ПКа такжеФиксированная ширина и высота,Рекомендуемое использованиеabsolute + 负 marginРеализация метода;
  • если ваш проектТребования совместимости на стороне ПКа такжеШирина и высота не фиксированы,Рекомендуемое использованиеcss-tableспособ достижения;
  • если ваш проектНет требований совместимости на стороне ПК,Рекомендуемое использованиеflexДля достижения центрирования, конечно, без учета IE,gridтакже хороший выбор;
  • если ваш проектflex,grid

напиши в конце

Элемент псевдокласса,grid-контейнер строк сетки-шаблонаПодождите, вы можете спуститься и попробовать сами~

   Выходные закончились, до понедельника еще далеко?Желаю всем нового начала новой недели~

   Ты красивый и красивый, пожалуйста, поставь лайк и уйди~

Категории