Как сделать чтобы блок был по центру css
Перейти к содержимому

Как сделать чтобы блок был по центру css

  • автор:

Блок по центру экрана

6 способов выровнять блок по центру по вертикали и горизонтали.

Время чтения: 5 мин

Открыть/закрыть навигацию по статье

  1. Задача
  2. Готовое решение
  3. Разбор решения
    1. Гриды
    2. Флексбокс. Первый способ
    3. Флексбокс. Второй способ
    4. Отступ и трансформация
    5. Абсолютное позиционирование с известной высотой
    6. Абсолютное позиционирование без известной высоты

    Задача

    Скопировать ссылку «Задача» Скопировано

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

    Готовое решение

    Скопировать ссылку «Готовое решение» Скопировано

    Ниже перечислены все возможные способы центрирования элемента. Выберите один из них.

    Центрируем при помощи гридов:

     .parent  display: grid; place-items: center;> .parent  display: grid; place-items: center; >      

    Центрируем при помощи флексбокса, способ первый:

     .parent  display: flex; justify-content: center; align-items: center;> .parent  display: flex; justify-content: center; align-items: center; >      

    Центрируем при помощи флексбокса, способ второй:

     .parent  display: flex;> .child  margin: auto;> .parent  display: flex; > .child  margin: auto; >      
     .child  margin-inline: auto; margin-block-start: 50vh; transform: translateY(-50%);> .child  margin-inline: auto; margin-block-start: 50vh; transform: translateY(-50%); >      

    Абсолютное позиционирование, когда известна высота:

     .child  height: 200px; margin-inline: auto; inset-inline: 0; /* Отступ сверху 50% минус половина высоты */ inset-block-start: calc(50% - 100px);> .child  height: 200px; margin-inline: auto; inset-inline: 0; /* Отступ сверху 50% минус половина высоты */ inset-block-start: calc(50% - 100px); >      

    Абсолютное позиционирование, когда высота неизвестна:

     .child  margin-inline: auto; inset-inline: 0; inset-block-start: 50%; transform: translateY(-50%);> .child  margin-inline: auto; inset-inline: 0; inset-block-start: 50%; transform: translateY(-50%); >      

    Разбор решения

    Скопировать ссылку «Разбор решения» Скопировано

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

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

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

    Обратите внимание, что по умолчанию у этого элемента задано абсолютное позиционирование. Переопределим позиционирование на статичное, чтобы оно нам не мешало.

        

    Привет, это Дока!

    body class="parent"> dialog class="child" open> h1>Привет, это Дока!h1> dialog> body>
     html  height: 100vh;> body  min-height: 100%;> dialog  position: static;> html  height: 100vh; > body  min-height: 100%; > dialog  position: static; >      

    Гриды

    Скопировать ссылку «Гриды» Скопировано

    Самый современный и изящный способ центрирования элемента — при помощи гридов.

    Делаем родителя — в нашем случае .parent — грид-контейнером.

     .parent  display: grid;> .parent  display: grid; >      

    После этого можем использовать свойства грид-контейнера для выравнивания вложенных элементов по вертикальной и горизонтальной осям:

     .parent  display: grid; justify-items: center; align-items: center;> .parent  display: grid; justify-items: center; align-items: center; >      

    Или использовать шорткат для объединения двух свойств в одно:

     .parent  display: grid; place-items: center;> .parent  display: grid; place-items: center; >      

    Флексбокс. Первый способ

    Скопировать ссылку «Флексбокс. Первый способ» Скопировано

    Используем флексбокс для выравнивания по центру. Тут есть два способа. В первом случае будем задавать свойства родителю.

    Делаем родителя флекс-контейнером:

     .parent  display: flex;> .parent  display: flex; >      

    Задаём свойства для выравнивания по центру вертикальной и горизонтальной осей:

     .parent  display: flex; justify-content: center; align-items: center;> .parent  display: flex; justify-content: center; align-items: center; >      

    Флексбокс. Второй способ

    Скопировать ссылку «Флексбокс. Второй способ» Скопировано

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

     .parent  display: flex;> .child  margin: auto;> .parent  display: flex; > .child  margin: auto; >      

    Отступ и трансформация

    Скопировать ссылку «Отступ и трансформация» Скопировано

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

     .child  margin-inline: auto; margin-block-start: 50vh;> .child  margin-inline: auto; margin-block-start: 50vh; >      

    Верхний внешний отступ равен 50% высоты экрана, но это сдвигает элемент чуть ниже центра.

    Чтобы расположить элемент ровно по центру, нужно использовать свойство transform с функцией translate Y ( ) в качестве значения.

     .child  margin-inline: auto; margin-block-start: 50vh; transform: translateY(-50%);> .child  margin-inline: auto; margin-block-start: 50vh; transform: translateY(-50%); >      

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

    Абсолютное позиционирование с известной высотой

    Скопировать ссылку «Абсолютное позиционирование с известной высотой» Скопировано

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

    Для начала разберём пример, когда у элемента задана фиксированная высота:

     .parent  position: relative;> .child  position: absolute; height: 200px;> .parent  position: relative; > .child  position: absolute; height: 200px; >      

    Сначала нужно задать элементу координаты отсчёта позиции. Пока зададим 0 со всех четырёх сторон. Используем логическое свойство inset .

     .child  position: absolute; height: 200px; inset: 0;> .child  position: absolute; height: 200px; inset: 0; >      

    На самом деле нам нужны нули только по горизонтали. Для выравнивания используем уже знакомый приём с автоматическими боковыми отступами.

    По вертикали от верхнего края хотим оттолкнуть элемент на 50% минус половина высоты элемента. В нашем случае это 125 пикселей. Будем использовать функцию calc ( ) :

     .child  position: absolute; height: 250px; margin-inline: auto; inset-inline: 0; inset-block-start: calc(50% - 125px);> .child  position: absolute; height: 250px; margin-inline: auto; inset-inline: 0; inset-block-start: calc(50% - 125px); >      

    Абсолютное позиционирование без известной высоты

    Скопировать ссылку «Абсолютное позиционирование без известной высоты» Скопировано

    В этом варианте высота элемента не фиксирована. Значит, нам нечего вычитать из 50% для отступа от верхнего края. Используем transform , который вычисляет проценты от размера элемента.

     .child  position: absolute; margin-inline: auto; inset-inline: 0; inset-block-start: 50%; transform: translateY(-50%);> .child  position: absolute; margin-inline: auto; inset-inline: 0; inset-block-start: 50%; transform: translateY(-50%); >      

    Как выровнять div по центру в HTML

    Анонимный Спасибо. NMitra Пожалуйста! С праздниками! Анонимный это невероятно, это охуенный сайт, однозначно в закладки!!11одинодин NMitra Радостно слышать 🙂 Анонимный Спасибо помог! NMitra Рада стараться 🙂 Анонимный Спасибо, долго не мог решить проблему выравнивания тега div по центру, а здесь я нашел все ответы) Вячеслав div по центру. к примеру есть div — center

    HTML:
    div />Ваша информация
    /div

    Задаем вопросы на нашем форуме: forum.uss.name NMitra И мы неправильно на них ответим. Какой ещё float:center; ?? Елена и Александр Никитины Здравствуйте!
    Подскажите как вот здесь http://www.spo565.ru/2014/03/blog-post_9510.html выровнять каталог, чтобы он одинаково справа и слева вылазил за пределы ширины блога NMitra Здравствуйте, попробуйте так

    iframe[src^=»http://ru.oriflame.com] position: relative;
    left: -106px;
    >

    У вас сайт фиксированный, поэтому из ширины каталога нужно вычесть ширины блока с содержанием и поделить на два. Елена и Александр Никитины Наталья, вы меня конечно извините, а куда этот код вставить? NMitra Это стиль CSS. Добавлять так http://shpargalkablog.ru/2011/12/kak-izmenit-shablon-blogger.html Елена и Александр Никитины Наталья, и первый и второй вариант попробовал, никаких изменений не произошло. Вообще никаких, странно. Елена и Александр Никитины Оставил первый вариант: изменения в коде шаблона перед ]]>. http://www.spo565.ru/2014/03/blog-post_9510.html Елена и Александр Никитины Перед ]]> NMitra Кавычки забыла:

    iframe[src^=»http://ru.oriflame.com»] < Елена и Александр Никитины Наталья, вы-ЭКОНОМИСТ. нашего времени и нервов! Спасибо Вам огромное!
    . теперь пытаюсь Хлебные крошки победить, вроде ваш материал изучил, но с чего начать и как их запустить. NMitra С чего нибудь)) Наверно уже не смогу более подробно объяснить. Анонимный Спасибо! Анонимный Тема поста: Как выровнять div по центру в HTML
    А содержание: выравнивание текста внутри div NMitra Вы не правы, div выравнивается по горизонтали. Ему можно задать разные значения свойства display. И поэтому выравнивание зависит в том числе от родителя. Думаю, вам будет интересна эта статья http://shpargalkablog.ru/2012/03/vyrovnyat-tekst-vertikali.html

    Названием я лишь пытаюсь предугадать как будут искать посетители. Чаще они задают не вопрос «Выравнять блок по горизонтали», а «Как выровнять блок по центру». Анонимный Интересно, работает, но не понятен сам механизм: каким образом свойство ‘margin: 0 auto’ выравнивает блок по ценру? Сможете объяснить? NMitra Посмотрите тут http://shpargalkablog.ru/2011/03/svoistva-margin-padding.html#m-auto
    Если не вразумительно объяснила, обязательно скажите, попробую ещё раз Анонимный Посмотрите тут: http://ledcl.ru/info/programs_instr.html Как в самом низу стрелку выровнять по правому краю? NMitra .button_up a float: right;
    > Анонимный Спасибо! Alex Огромное СПАСИБИЩЕ. NMitra Благодарю за комментарии! Побольше бы таких! Леонид Гаврилов Сиэсэс — это сила! NMitra Угу 🙂 Андрей Лукницкий Спасибо большое всё получилось.
    Анонимный Здравствуйте!
    Такой вопросик.

    //div style=»width:77%; height:555px; margin:0 auto; border:3px solid red;»\\
    //div style=»width:100%; height:55px; background-color:green;» \\

    //select style=»width:177px; float:left; «\\
    //option\\lev//option\\
    //select\\
    //select style=»width:177px; float:right; «\\
    //option\\prav//option\\
    //select\\
    //select style=»width:177px; display:block; margin:0 auto; overflow: auto; «\\
    //option\\seredina//option\\
    //select\\

    Всё красиво и хорошо. Но мне надо что-бы при уменьшении экрана. Эти селекторы становились в столбик. Ну ни как не получается. Если можете, подскажите как. Буду очень благодарен.

    NMitra Здравствуйте! Проще всего использовать @Media http://shpargalkablog.ru/2010/12/shirina-saita-css.html Анонимный Спасибо Вам.
    Я в принципе этим всегда и пользуюсь. Но опять проблема с ИЕ. Там приходится ЯваСкриптом отслеживать. Думал вы сможете подсказать, как это можно реализовать просто, правильно задав стили. Ведь это у Вас получается ну очень хорошо. Ладно, спасибо Вам. Порою ещё.
    NMitra Остальное точно в старых IE не будет работать 🙂 Анонимный Благодарю Вас.
    Я тут как бы один способ полу нарыл додумал. Как это можно было сделать с таблицей и немного ЯваСкрипт. Но одна проблемка. Ещё подумаю, порою. Если не получится. Можно Вам сюда ещё напишу, может у Вас будет какая мысль?
    Пошёл дорывать, думать.
    NMitra Конечно. Только одна просьба: сбрасывайте примеры на https://jsfiddle.net/ Всё равно я потом там смотрю результат Анонимный Значит так. В первом варианте работает только. Когда экран фактически имеет такой размер. Потому как, при загрузке страницы считывается размер и через document.wrire(); выводится результат если попало на ИФ.

    Вот если есть какой-то способ вместо document.wrire(); как-то иначе отображать. Тогда всё было бы хорошо.

    Поэтому думал и нашёл вроде что-то. Уже казалось СУПЕР. Но проблема что нам надо не открывающий tr и закрывающий tr. А наоборот. закрывающий tr и потом открывающий tr.
    Значит не то.
    https://jsfiddle.net/znko0w45/

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

    До свидания.
    Анонимный Извините, ещё дополню.
    Во втором способе.
    Оказывается и простая вставка tr /tr если написана перед загрузкой превращает их в столбик. Но после загрузки. Новый элемент появляется но остальные никак не реагируют.

    Как сделать DIV по центру страницы?

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

    Выровнять div по центру страницы

    Для выравнивание блока DIV по центру страницы, проще всего воспользоватся абсолютным или фиксированным позиционированием и отталкиваться от границ страницы сайта.
    Вот как это выглядит в коде:

    .centered < position: fixed; /* or absolute */ top: 50%; left: 50%; width: 200px; height:100px; background: #f0f0f0; >

    Мы создали свойства для блока DIV с классом centered, прописали фиксированную позицию, задали значения ширины и высоты, и отступили от верхнее и левой границы сайта по 50%, в результате мы почти получили желаемое:

    div по центру страницы

    div по центру страницы

    Наш блок DIV выровнялся по середине страницы, но относительно своего левого верхнего угла, соответственно нам необходимо сдвинуть наш div на 50% вверх и влево относительно своей ширины и высоты.
    Сделаем мы это с помощью отрицательных значений свойства margin:

    .centered < position: fixed; /* or absolute */ top: 50%; left: 50%; width: 200px; height:100px; margin: -50px 0 0 -100px; background: #f0f0f0; >

    т.к. у нашего блока фиксированный размер width: 200px; height:100px;, то 50% от ширины и высоты мы легко посчитали и получили: margin: -50px 0 0 -100px;

    Теперь результат нашей работы нас устраивает:

    div по центру страницы

    div по центру страницы

    Выровнять блок DIV по центру страницы не зная его размеров

    В случае если мы не знаем ширину и высоту нашего блока, то вместо margin, можно воспользоваться transform: translate(-50%, -50%);, свойство transform: translate(-50%, -50%); смещает наш блок относительно его размеров и тем самым решает нашу задачу ��

    Выровнять div по горизонтали

    Зачастую выровнять блок DIV по центру относительно горизонтали, применяется для выравнивания самого сайта по центру окна браузера.
    Сделать это очень просто, посмотрите сами:

    .wrapper

    Все выравнивание блока DIV wrapper, осуществляется с помощью свойства margin:0 auto;, главное чтобы значение ширины было меньше чем у родительского блока ��

    Отцентрировать блок по горизонтали

    Отцентрировать блок по горизонтали

    Демо пример выравнивания блока DIV по горизонтали, относительно краев окна браузера.

    Если у вас остались вопросы или в этом посте не описана ваша ситуация по выравниванию блока DIV. Пишите все в комментариях к посту, обязательно вам отвечу и помогу ��

    Как выровнять блок (div) по центру — все популярные способы выравнивания

    Подробное руководство по центрированию элементов на странице.

    В этой статье рассмотрим, как отцентрировать блок по горизонтальной и вертикальной оси.

    Горизонтальное центрирование

    Первый способ

    Первый вариант самый просто — просто добавьте вашему блоку свойство text-align: center;

    .myblock

    Элемент по центру

    ⚠️ Недостаток этого метода в том, что теперь весь контент внутри этого блока будет центрироваться по центру:

    Центрирование текста css

    Таким образом данный способ подойдет для конкретной строки (например для h2,h3 и тд). Но для центрирования блока это плохой вариант.

    Второй способ

    Тоже достаточно простой способ. Используем display: flex;

    К примеру, хотим выровнять один блок (заголовок h1):

     

    Заголовок

    .myblock

    Блок по центру с помощью flex

    ⚠️ Важно, если вы хотите добавить несколько блоков внутри элемента с классом .myblock, то нужно немного изменить css.

     

    Заголовок

    Небольшой текст

    Здесь мы добавили блок с классом width-1-2, чтобы продемонстрировать, как работает центрирование для блоков с заданной шириной.

    .myblock < display: flex; flex-direction: column; align-items: center; justify-content: center; >.width-1-2

    Нам пришлось добавить в css свойство flex-direction: column, чтобы сменить основную ось (была горизонтальная, стала вертикальная) и разместить блоки друг над другом. И раз мы сменили ось, то теперь нам нужно использовать align-items:center, чтобы разместить блок по центру.

    Блок по центру

    Как видите, блоки размещены по центру, при этом, в отличие от text-align: center; текст внутри div не центрирован.

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

    Вертикальное центрирование

    Здесь все немного интереснее, но все так же при этом просто и понятно.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *