Как выровнять по центру элемент css: Выравнивание по центру в CSS

Выравнивание div’ов по центру | О жизни виртуальной и реальной

Перейти к содержанию

Много лет проблема выравнивания div’ов по центру была головной болью web-верстальщиков. Единственная таблетка, предлагаемая спецами, которая к тому же и не помогала:

margin: 0px;

Но все изменилось после того, как в CSS появился элемент Flexbox. Вернее, это целый комплекс элементов, гораздо более гибкий, чем контейнеры

display: box;

Строят его из двух частей: flex-контейнера и дочерних элементов внутри него. Эти дочерние элементы можно выстраивать как угодно — и в ряд, и столбиком, и задавать интервалы между ними и много чего еще. К нему неприменимы старые добрые атрибуты float, margin, clear, vertical-align. Однако это не повод для расстройства, так как вместо них используются другие. Кроме того, элементы флекса приспосабливаются к любому размеру экрана, их отображение можно упорядочить в любом направлении.

Впрочем, это все тема для большой отдельной статьи, а здесь просто привожу рецепт div’ного выравнивания блока по центру страницы. Вот он:

.flexcontainer {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

То есть создаем родительский контейнер (display: flex;), а затем указываем, как располагать в нем дочерние элементы. Свойства align-items и justify-content как раз и нужны, чтобы выстроить содержимое внутри контейнера по центру (по вертикальной и горизонтальной оси соответственно).

В заключение — список популярных браузеров, поддерживающих технологию Flexbox (все свойства):

• Chrome 49+
• Mozilla Firefox 51+
• IE 11
• Opera 43+
• Opera mini

Есть и более старые версии браузеров, поддерживающих эту технологию, но не в полном объеме.

Похожие записи:

Понравилась статья? Расскажите друзьям!

Более ранние записи:

Рубрики

Метки

Как прикрепить элемент к центру его родителя

Центрирование элементов в CSS иногда может показаться невозможным. Особенно, если центрируемый дочерний элемент имеет динамическую ширину или высоту или на самом деле больше, чем его родительский элемент.

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

К счастью для нас, это на самом деле довольно просто с небольшой магией flexbox!

Для родительского элемента все, что нам нужно сделать, это:

1. установить родительский элемент-контейнер для использования flexbox
2. центрировать дочерние элементы по горизонтали с помощью justify-content
3. центрировать дочерние элементы по вертикали с помощью align-items

 . родительский-контейнер {
  дисплей: гибкий;
  выравнивание содержимого: по центру;
  выравнивание элементов: по центру;
}
 

Одна важная вещь, которую нельзя пропустить в дочернем элементе, это скажи ему не уменьшаться

 .child-canvas {
  гибкая усадка: 0;
}
 

Вот пример, с которым вы можете поиграть:

 .parent{
  ширина: 200 пикселей;
  высота: 300 пикселей;
  дисплей: гибкий;
  выравнивание содержимого: по центру;
  выравнивание элементов: по центру;
  граница: 5px пунктирная #6BD9ED;
}
.ребенок{
  ширина: 300 пикселей;
  высота: 400 пикселей;
  гибкая усадка: 0;
  граница: 5px пунктирная #A7E040;
} 

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

 . parent{
  ширина: 200 пикселей;
  высота: 300 пикселей;
  дисплей: гибкий;
  выравнивание содержимого: по центру;
  выравнивание элементов: flex-start;
  граница: 5px пунктирная #6BD9ED;
}
.ребенок{
  ширина: 300 пикселей;
  высота: 400 пикселей;
  гибкая усадка: 0;
  граница: 5px пунктирная #A7E040;
} 

Или закрепить внизу слева:

 .parent{
  ширина: 200 пикселей;
  высота: 300 пикселей;
  дисплей: гибкий;
  выравнивание содержимого: flex-start;
  элементы выравнивания: flex-end;
  граница: 5px пунктирная #6BD9ЭД;
}
.ребенок{
  ширина: 300 пикселей;
  высота: 400 пикселей;
  гибкая усадка: 0;
  граница: 5px пунктирная #A7E040;
} 

Даже после того, как вы закрепите его, вы можете внести небольшие изменения, используя относительное позиционирование дочернего элемента, чтобы получить его именно там, где вы хотите:

 .parent{
  ширина: 200 пикселей;
  высота: 300 пикселей;
  дисплей: гибкий;
  выравнивание содержимого: по центру;
  выравнивание элементов: по центру;
  граница: 5px пунктирная #6BD9ED;
}
.
  ребенок{
  ширина: 300 пикселей;
  высота: 400 пикселей;
  гибкая усадка: 0;
  граница: 5px пунктирная #A7E040;
  положение: родственник;
  справа: -15px
} 

Теперь, когда вы знаете, как прикреплять элементы к их родителям, вы можете легко центрировать макеты. Flexbox очень мощен для этого и многих других потребностей пользовательского интерфейса. Flexbox Zombies раскрывает все это в мельчайших (кровавых?) деталях!

Вот ваше домашнее задание: поиграйте с приведенными выше примерами codepen и найдите способ использовать это, чтобы упростить один из ваших существующих приемов центрирования.

10 трюков CSS, которые вы должны знать для центрирования элементов | by fatfish

Хотел бы я знать об этом раньше.

Использование CSS для центрирования элемента довольно распространено в повседневной жизни фронтенд-разработчика. Это также вопрос, который часто задают в интервью.

Возможно, для этого вы использовали flex или absolute + transform , но знаете ли вы, что есть как минимум 10 способов сделать это?

Это каталог статей, вы можете выбрать любую технику, о которой вам интересно прочитать.

· 1. абсолютное + (-поле)
· 2. абсолютное + поле авто
· 3. absolute + calc
· 4. flex
· 5. grid
· 6. absolute + transform
· 7. text-align + line-height + vertical-align
· 8. css-table
· 9. write-mode
· 10. table

Если ширина и высота элемента известны , мы можем использовать как минимум 3 способа центрирования элемента. Например, на следующем рисунке ширина и высота котенка равны «500 пикселей» и «366 пикселей» соответственно. Как мы должны центрировать его?

Его будет легко дополнить ‘absolute + (-margin)’!

HTML

CSS

Этот метод прост для понимания и имеет хорошую совместимость. Недостатком является то, что нам нужно знать ширину и высоту дочерних элементов.

Мы также можем центрировать котенка, установив расстояние во всех направлениях на 0 и установив поле на авто.

CSS

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

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

CSS

Совместимость этого метода зависит от совместимости calc, недостатком является то, что вам нужно знать ширину и высоту дочерних элементов

Вышеуказанные три метода должны знать ширину и высоту элемента заранее. Что делать, если ширина и высота элемента неопределенны?

flex отлично подходит для этого.

HTML

CSS

Это действительно здорово, мы можем центрировать элемент с очень небольшим количеством кода. Это мой любимый способ использования.

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

CSS

Используя преобразование , мы также можем центрировать элемент, не зная заранее ширины и высоты элемента.

CSS

Приведенные выше 6 способов просты для понимания и часто используются в нашей работе.

Следующие 4 метода используются реже, но их тоже стоит изучить.

Во-первых, мы можем установить для свойства display элемента span значение inline-block. Затем, установив для свойства text-align контейнера значение center, элемент span можно центрировать по горизонтали. В сочетании с высотой строки и другими свойствами сделайте его центрированным по вертикали.

CSS

Новое свойство таблицы CSS позволяет нам превращать обычные элементы в реалистичный эффект табличных элементов, и с помощью этой функции элемент также может быть центрирован.

CSS

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

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

HTML

CSS

Наконец, последний способ, конечно, наименее рекомендуемый, но я упомянул его просто как пример для обучения. Я не рекомендую вам использовать его на работе, потому что он (как мне кажется) отстой.

HTML

CSS

Спасибо за внимание. Я ищу с нетерпением жду ваших подписок и чтения более качественных статей.

Интервьюер: Что случилось с «npm run xxx»?

Секрет, о котором не знает большинство людей.

javascript.plainenglish.io

20 методов массивов JavaScript, которые должен знать каждый разработчик

Знаете ли вы, как реализованы эти 20 методов массивов?

javascript.plainenglish.io

8 крутых трюков с GitHub, которые сделают вас похожим на старшего разработчика

8 крутых вещей, которые вы можете сделать с GitHub = x” Возврат True в JavaScript？

Пять волшебных знаний JavaScript, о которых вы, возможно, не знали!

javascript.