dr.Brain

doctor Brain

мир глазами веб-разработчика

CSS: центрируем по горизонтали

разбираемся с центрированием элемента по горизонтали с помощью CSS

dr.Brain

время чтения 1 мин.

Photo by Ricardo Jessica Tan on Unsplash

Рассмотрим несколько способов центрирования элемента по горизонтали с помощью CSS

Блок с фиксированной шириной

<p class="center-by-fixed-width">Centering</p>
.center-by-fixed-width {
  width: 70px;
  margin: 0 auto;
}

Текст

<p class="center-by-text-align">Centering</p>
.center-by-text-align {
  text-align: center;
}

Блок без фиксированной ширины

<div class="center-by-unfixed-width">
  <span>Centering</span>
</div>
.center-by-unfixed-width {
  text-align: center;
}

table

<p class="center-by-table">Centering</p>
.center-by-table {
  display: table;
  margin: 0 auto;
}

flex

<div class="center-by-flex">
  <p>Centering</p>
</div>
.center-by-flex {
  display: flex;
  justify-content: center;
}

grid

<div class="center-by-grid">
  <p>Centering</p>
</div>
.center-by-grid {
  display: grid;
  justify-content: center;
}

Относительно родителя

<div class="center-by-absolute-parent">
  <p class="center-by-absolute-child">Centering</p>
</div>
.center-by-absolute-parent {
  position: relative;
}

.center-by-absolute-child {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

calc

<p class="center-by-calc">Centering</p>
.center-by-calc {
  width: 70px;
  margin-left: calc(50% - 35px);
}

align-content

<div class="container-center-by-align-content">
	<div class="child-center-by-align-content"></div>
</div>
.container-center-by-align-content {
  display: flex;
  align-content: center;
}

.child-center-by-align-content {
	width: 100px;
	height: 100px;	
}

Cпасибо за внимание

Новые публикации

Далее

Категории

О нас

Frontend & Backend. Статьи, обзоры, заметки, код, уроки.