CSS центрирование элемента внутри контейнера

Несколько способов центрировать html-элемент внутри контейнера по горизонтали и вертикали с помощью двух-трёх строк CSS.

1. CSS place-items + grid

HTML

<div class="hero">
  <div class="hero-wrapper">
    <h2>CSS</h2>
    <pre>{
      display: grid;
      place-items: center;
    }</pre>
  </div>
</div>

CSS

.hero {
  display: grid;
  place-items: center;}

Прежде чем погрузиться в подробности, стоит упомянуть, что place-items – это сокращенное свойство, которое объединяет justify-items и align-items. Этот код делает то же самое, что приведенный выше:

CSS

.hero {
    display: grid;
    justify-items: center;
    align-items: center;
}

Когда используется свойство place-items, оно применяется к каждой ячейке сетки. Это означает, что будет центрироваться содержимое ячейки. Этот метод будет работать и с несколькими ячейками. Увеличим количество столбцов, так будет более понятно.

CSS

.hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    place-items: center;
}

See this code display: grid + place-items: center on x.xhtml.ru.

2. CSS flexbox + align-items + justify-content

HTML

<div class="parent">
  <div class="child">В центре!</div>
</div>

CSS

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

See this code flexbox + align-items + justify-content on x.xhtml.ru.

3. CSS margin: auto + flexbox

В сочетании с flexbox, margin: auto может очень легко центрировать элемент по горизонтали и вертикали.

HTML

<div class="parent">
  <div class="child">В центре!</div>
</div>

CSS

.parent {
  display: flex;
}
.child {
  margin: auto;
}

See this code display:flex + margin: auto on x.xhtml.ru.