Как выровнять блок по центру в css
Доброго времени суток всем читателям блога. В этой статье будет рассматриваться вопрос о том как можно расположить абсолютно любой блок по центру страницы или внутри блока с помощью css. Здесь будут рассматриваться основные варианты, которые я сам использую в своих проектах. Что ж, начнем!
1. Настраиваем базовую разметку и стили
Что бы вам все было понятно, для наглядности будет использоваться вот такая простенькая верстка:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="block"></div>
</body>
</html>
Блок с классом “.block ” мы будем центрировать.
Теперь зададим базовые стили:
html,body{
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.block{
position: absolute;
width: 100px;
height: 100px;
background-color: green;
}
Здесь мы растягиваем на всю ширину и высоту нашего окна html и body и задаем position: relative; для относительного позиционирования дочернего блока. Для дочернего блока с классом “.block” задаем фиксированную ширину и высоту, записываем “background-color: green” для того что бы мы могли видеть сам блок, а также указываем “position: absolute;” что бы он позиционировался относительно body. С базовой версткой и стилями определились!
В своих проектах я использую два варианта расположения блоков по центру. Первый вариант с использованием position: absolute;, а второй с использованием cssflexbox. Рассмотрим их по отдельности!
2. Центрирование с помощью “position: absolute;” если известны ширина и высота блока
Есть несколько вариантов расположения блока по центру таким образом.
Первый вариант:
.block{
position:absolute;
width:100px;
height:100px;
top:50%;
left:50%;
margin-top: -50px;
margin-left: -50px;
background-color: yellow;
}
В данном примере “top: 50%; left: 50%;” означает, то что блоку нужно отступить сверху и слева на 50%, а “margin-top: -50px; margin-left: -50px;” говорит что нужно сместиться вверх и влево на отрицательное значение -50px(половина от ширины и высоты блока).
Второй вариант:
.block{
position:absolute;
width:100px;
height:100px;
left:0;
right: 0;
top: calc(50% - 50px);
margin: 0 auto;
background-color: yellow;
}
Здесь указываем “left: 0; right: 0; margin: 0 auto;” что бы блок расположился по центру по горизонтали, а для того что бы он был по центру по вертикали записываем функцию “calc(50% - 50px);” в которой указываем что нужно отступить сверху на 50% - 50px(половина от высоты блока).
3. Универсальный способ центрирования с помощью “position: absolute;”
Выше описанные способы могут подойти только в том случае если известны ширина и высота блока, но как же быть если эти величины нам не известны и они могут изменяться в зависимости от контента расположенного внутри. Для таких случаев существует такой способ:
.block{
position:absolute;
width:100px;
height:100px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: yellow;
}
Как было написано выше, этот способ является универсальным, поскольку все необходимые величины указаны в процентах и автоматически подстраиваются под любые размеры блока.
4. Универсальный способ центрирования с помощью “css flexbox”
Для того что бы расположить блок по центру с помощью этого способа нам не нужны такие свойства как “position: relative/absolute;”, а все что нужно сделать так это указать вот такой код:
body{
display: flex;
justify-content: center;
align-items: center;
}
.block{
width:100px;
height:100px;
background-color: yellow;
}
Так как позиционирование элементов с помощью “flexbox” влияет только на дочерние элементы, значит для того что бы все работало, стили нужно указывать родительскому блоку. В этом примере “body” является родительским блоком, поэтому ему и указываем данные стили “display: flex; justify-content: center; align-items: center;”
С помощью этого способа был отцентрирован прелоадер который мы делали в этой статье "Прелоадер на html и css для своего сайта".
На этом пожалуй все. Если эта статья была вам полезна, то подписывайтесь на новости блога что бы не пропускать новые, еще более интересные статьи!
Также подписывайтесь на мой instagram и telegram, там вы сможете найти много полезной информации, а также познакомится с людьми которые только начинают или уже начали свой путь верстальщика.
Не забывайте оставлять свои комментарии, а также если у вас есть интересная тема для следующей статьи, то вы можете написать ее в комментариях или отправить на почту nd.webdew@gmail.com и я постараюсь ее для вас сделать. Всем спасибо за внимание и пусть баги будут фичами!
комментарии (0)
написать комментарийкомментариев нет