phpjsJqueryhtmlcssblog

Как поставить блок по центру экрана

div по центру или "как поставить блок по центру" другого "div", либо по центру экрана. Разберем несколько примеров, когда известны высота и ширина. Как поставить div по центру, если ширина и высота не известны...

Подробно о расположении div по центру

1. Div по центру если известна высота и ширина
   
   1. Поставим div по центру с помощью атрибута display
   2. Поставим div по центру с помощью таблицы
   3. Поставим div по центру с помощью position + margin
   4. Поставим div по центру с помощью display + margin
2. div по центру экрана
3. Скачать можно здесь

Скопировать ссылку



1. Div по центру если известна высота и ширина

   Несколько вариантов расположения div по центру - если известна высота и ширина, двух блоков, которые расположены один в другом...
   

   Это довольно простая ситуация, с точки зрения позиционирования.

   Сделал 4 варианта - думаю для этого пункта будет достаточно!

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

   
   
   
   Скопировать ссылку

   Поставим div по центру с помощью атрибута display

   Для данного примера установки одного блока в середине другого блока нам понадобится:

   Один наружный div с произвольным названием класса = "out".

   И второй div с таким же произвольным названием класса, кот орый будет находится внутри предыдущего:

   <div class="out">
   <div class="into"></div>
   </div>
   
   Css :

   Далее переходим к css, с помощью которого и поставим div по центру другого div.

   Задаем свойства для класса "out" :

   width

   height

   background color

   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.

   position и

   margin

   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 по центру возможна только в сотрудничестве

   display + flex и

   Свойство 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) - в данном примере никак не влияет на позиционирование.

Еще никто не прокомментировал! COMMENTS+   BBcode

Подписаться + =

---