Как поставить блок по центру экрана
div по центру или "как поставить блок по центру" другого "div", либо по центру экрана. Разберем несколько примеров, когда известны высота и ширина. Как поставить div по центру, если ширина и высота не известны...
Подробно о расположении div по центру
-
Div по центру если известна высота и ширина
Несколько вариантов расположения div по центру - если известна высота и ширина, двух блоков, которые расположены один в другом...
Это довольно простая ситуация, с точки зрения позиционирования.
Сделал 4 варианта - думаю для этого пункта будет достаточно!
В данном случае ... у нас будет известна и высота и ширина div, что еще больше упрощает ситуацию.
Поставим div по центру с помощью атрибута display
Для данного примера установки одного блока в середине другого блока нам понадобится:
Один наружный div с произвольным названием класса = "out".
И второй div с таким же произвольным названием класса, кот орый будет находится внутри предыдущего:
<div class="out">
<div class="into"></div>
</div>
Css : Далее переходим к css, с помощью которого и поставим div по центру другого div.
Задаем свойства для класса "out" :
text-align: center; - за горизонтальное
display + table-cell + vertical-align: middle; - отвечают за вертикальное выравнивание
Задаем свойства для класса "into"... тут все свойства подобные, кроме "display" он имеет значение "inline-block" - которое вместе с "text-align" выше отвечает за горизонтальное выравнивание.
Соберем весь код вместе: Css : <style>
.out {
width: 200px;
height: 200px;
text-align: center;
vertical-align: middle;
background-color: #007a6c;
display: table-cell;
}
.into {
display: inline-block;
width: 100px;
height: 100px;
background-color: #14287e;
}
</style>
Html : <div class="out">
<div class="into"></div>
</div>
Результат установки div по центру другого div:
Поставим div по центру с помощью таблицы
Следующий вариант постановки div по центру - использование таблицы. Т.е. если сравнить css с предыдущем, то у наружного класса убираем "display: table-cell" и div замещаем table с td
Css : <style>
td.out_td {
width: 200px;
height: 200px;
background: aliceblue;
vertical-align: middle;
text-align: center;
}
.into {
display: inline-block;
width: 100px;
height: 100px;
background-color: #14287e;
}
</style>
Html : <table>
<td class="out_td">
<div class="into"></div>
</td>
</table>
Результат позиционирования по центру с помощью таблицы:
Поставим div по центру с помощью position + margin
Следующий пример постановки div по центру, зависит от стилей внутреннего div.
Css: <style>
.out_h {
height: 200px;
width: 200px;
background: beige;
}
.into_h_m {
height: 100px;
margin: 50px;
width: 100px;
background: blue;
position: absolute;
}
</style>
Html: <div class="out_h">
<div class="into_h_m"></div>
</div>
Результат расположения div по центру с помощью position + margin
Поставим div по центру с помощью display + margin
Здесь постановка div по центру возможна только в сотрудничестве
Css: <style>
.out_f{
display: flex;
width: 200px;
height: 200px;
background-color: yellow;
}
.into_f {
width: 100px;
height: 100px;
margin: auto;
background-color: red;
}
</style>
Html: <div class="out_f">
<div class="into_f "></div>
</div>
Пример позиционирования div с помощью flex и margin
Div по центру экрана
Как поставить "div по центру экрана" если высота экрана неизвестна?
Данный пример расположения div по центру - требует отдельного примера на отдельной странице.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Пример веб-страницы</title>
<style>
.block {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 300px;
border: 1px solid #aba6a6;
transform: translate(-50%,-50%);
BACKGROUND: #f3f3f3d1;
}
</style>
</head>
<body>
<div class="block"></div>
</body>
</html>
Пример расположения div по центру на странице
ПримерШирина наружного элемента(width) и высота(height) - в данном примере никак не влияет на позиционирование.
Свои комменты в ожидании переделки!
Когда сделаю не знаю!
Времени нет...
Иначе сообщение будет удалено, вас в бан - все просто!
Но если, сил нет как хочется высказать всё, что вы думаете об этом, пожалуйста - комменты от Vk - форма ниже:
