Css по центру экрана: Выравниваем блок по центру страницы / Хабр

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

text-align: center;

Свойство CSS text-align выравнивает содержимое тега и принимает значения

<span>текст</span>

Если для блочного [занимаемого всю доступную ширину], то содержимое элемента переместиться в центр

<div>текст</div>

текст

 <div>
  <span>встроенный элемент <br /> в две строки</span>
</div>

встроенный элемент
в две строки

<div>
  <div>обтекаемый <br /> блочный элемент</div>
</div>

обтекаемый
блочный элемент

<div>
  <div>блочный элемент <br /> фиксированной ширины</div>
</div>

блочный элемент
фиксированной ширины

margin: 0 auto;

Свойство margin решает проблему

<div>
  <div>блочный элемент <br /> определённой ширины</div>
</div>

блочный элемент
определённой ширины

<img src="URL_изо"/>

width можно не рассчитывать и при display: table

<div>
  <div>блочная <br /> таблица</div>
</div>

блочная
таблица

float

float не имеет значения center

float: left;
обтекание слева

float: right;
обтекание справа

Для старых браузеров, чтобы выравнять блок, не имеющий фиксированной ширины, можно воспользоваться методом, описанным тут [Студия Артемия Лебедева] http://nocode.in/aligning-text-smartly-in-css/

Выравнивание элементов во Flex контейнере — CSS

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

Для центрирования элемента по перекрёстной оси (в данном случае — вертикальной) используется свойство align-items. Для центрирования элемента по главной оси (в данном случае — горизонтально), используется свойство justify-content

На примере ниже можно изменить размер контейнера или вложенного элемента, но элемент всегда останется по центру.

В этом руководстве рассматриваются следующие свойства:

• justify-content — управляет выравниванием элементов по главной оси.
• align-items — управляет выравниванием элементов по перекрёстной оси.
• align-self — управляет выравниванием конкретного flex элемента по перекрёстной оси.
• align-content — описывается в спецификации как “упаковка flex строк”; управляет промежутками между flex строками по перекрёстной оси.

Также будет рассмотрены авто-отступы для выравнивания элементов во flexbox.

Замечание: Свойства выравнивания во Flexbox помещены в отдельную спецификацию — CSS Box Alignment Level 3. Ожидается, что данная спецификация в конце концов заменит свойства, определённые во Flexbox Level One.

Свойства align-items и align-self управляют выравниванием flex элементов по перекрёстной оси: вертикальной для flex-direction установленным в row, и горизонтальной для flex-direction установленным в column.

Рассмотрим выравнивание по перекрёстной оси на простейшем примере. Если установить display: flex у контейнера, все дочерние элементы становятся flex элементами, выстроенными в ряд. Все они по вертикали примут размер самого высокого элемента, который станет определяющим вертикального размера. Если у flex контейнера задана высота, то все элементы растянутся до высоты контейнера, независимо от размера содержимого.

Все элементы становятся одной высоты, т.к. по умолчанию свойство align-items имеет значение stretch.

Другие возможные значения свойства:

• align-items: flex-start
• align-items: flex-end
• align-items: center
• align-items: stretch
• align-items: baseline

В примере ниже значение свойств align-items

Выравнивание одного элемента при помощи 

Свойство align-items устанавливает align-self для всех flex элементов как для группы. Это означает, что можно явно указать значение align-self для конкретного элемента. Свойство align-self может принимать все те же значения, что и свойство align-items, а так же значение auto, которое сбросит значение, установленное в flex контейнере.

В следующем примере, у flex контейнера установлено align-items: flex-start, означающее, что все элементы будут выравнены по началу перекрёстной оси. У первого элемента с помощью 

Изменение основной оси

До сего момента мы изучали поведение при flex-direction установленном в row, в языке, использующем написание сверху вниз. Это означает, что основная ось идёт горизонтально, а выравнивание по перекрёстной оси сдвигает элементы вверх или вниз.

Если изменить flex-direction

Можно попробовать пример ниже, где установлено flex-direction: column.

До сих пор мы выравнивали элементы внутри flex-контейнера. Если содержимое вашего flex контейнера переносится на несколько строк, используйте свойство align-content для управления свободным пространством между строками. В спецификации это описано как упаковка flex-строк.

Чтобы свойство align-content работало, необходимо, чтобы в flex-контейнере было больше места, что требуется для отображения всего содержимого. Оно применяется ко всем элементам как группе, и управляет распределением свободного места и положением всей группы элементов внутри контейнера.

Свойство align-content принимает следующие значения:

• align-content: flex-start
• align-content: flex-end
• align-content: center
• align-content: space-between
• align-content: space-around
• align-content: stretch
• align-content: space-evenly (не описано в спецификации Flexbox)

В примере ниже flex контейнер имеет высоту 400 пикселей — больше, чем необходимо для отображения всех элементов. Значение align-content установлено в 

Попробуйте другие значения align-content для понимания принципа их работы.

Также можно сменить значение flex-direction на column и увидеть, как наше свойство работает в режиме колонок. Как и ранее, что увидеть работу свойства, у контейнера должно быть больше свободного места, чем требуется содержимому.

Замечание: значение space-evenly не определено в спецификации flexbox и добавлено позже в спецификацию Box Alignment. Поддержка браузерами этого значение не так широка, как значений определённым в спецификации flexbox.

В документации по justify-content на MDN приведено больше деталей о всех значениях и поддержке браузерами.

Теперь, когда мы увидели, как работает выравнивание по перекрёстной оси, можно посмотреть на главную ось. Здесь нам доступно только одно свойство — justify-content. Это обусловлено тем, что с элементами на  главной оси мы работаем только как с группой. Используя свойство justify-content, мы контролируем, что происходит со свободным пространством на главной оси, и требуется ли нам больше пространства, чем нужно для отображения наших элементов.

В нашем первом примере с использованием свойства 

Свойство justify-content может принимать те же самые значения, что и align-content.

• justify-content: flex-start
• justify-content: flex-end
• justify-content: center
• justify-content: space-between
• justify-content: space-around
• justify-content: stretch
• justify-content: space-evenly (не определено в спецификации Flexbox)

В примере ниже, свойству justify-content задано значение space-between. Все доступное пространство распределяется между элементами после их позиционирования в контейнере. Первый и последний элементы занимают положения в начале и в конце контейнера соответственно.

Если свойство flex-direction имеет значение column, то свойство justify-content распределит доступное пространство в контейнере между элементами.

Выравнивание и режим записи

Необходимо помнить, что при использовании свойств flex-start иflex-end элементы позиционируются в режиме записи. Если свойству justify-content задано значение start и стоит режим записи left-to-right (слева-направо), как в английском, то элементы выравниваются, начиная с левой стороны контейнера.

Однако, если задан режим записи right-to-left (справа-налево), как в арабском языке, то элементы будут выстраиваться с правой стороны контейнера.

В примере ниже свойству property задано значение rtl, которое изменяет порядок наших элементов. Вы можете удалить это свойство или изменить значение свойства justify-content, чтобы увидеть, как работает flexbox, когда отображение элементов начинается справа.

Начальное положение элементов поменяется, если вы измените значение свойства flex-direction — например установите row-reverse вместо row.

В следующем примере заданы следующие свойства: flex-direction: row-reverse и justify-content: flex-end. В языках с параметром записи ltr все элементы будут отображаться с левой стороны. Попробуйте изменить свойство flex-direction: row-reverse на flex-direction: row. Вы увидите, что теперь элементы отображаются реверсивно.

Может показаться немного запутанным, но главное правило, которое необходимо запомнить – до тех пор, пока вы не измените свойство flex-direction, элементы контейнера выстраиваются в режиме записи вашего языка (ltr или rtl). 

Вы можете сделать отображение элементов контейнера блочным, задав свойству flex-direction значение  column. Свойство flex-start будет отображать элементы в столбец сверху вниз. Таким образом, первый элемент будет первым параграфом.

Если вы зададите свойству flex-direction реверсивное значение, то элементы будут позиционироваться в обратном порядке. Так, свойство flex-start будет брать начало в конце контейнера. Первый элемент будет находится в конце строки, если задано строчное отображение элементов или в конце параграфа, если задано блочное отображение.   

Так как элементы, расположенные на главной оси, обрабатываются как группа, свойства justify-items или justify-self становятся недоступными. Тем не менее, существует способ отделить конкретный элемент или группу элементов от остальных, используя внешний отступ margin со значением auto. 

Распространённый пример — панель навигации, в которой отдельные важные элементы выровнены по правому краю, а основная группа элементов — по левому.

На первый взгляд может показаться, что этот пример использования свойства justify-self. Однако, рассмотрим следующий ниже пример. Имеется три элемента с одной стороны и два — с другой. Если бы мы могли использовать justify-self на элементе d, это также изменило бы выравнивание следующего элемента — e, что может противоречить первоначальному замыслу.

Вместо этого мы можем выбрать четвёртый элемент (d) и отделить его от первых трёх, задав ему значение auto для margin-left. Авто-margin заполнит всё доступное свободное место по своей оси. Тем же образом работает margin-right. Оба свойства со значениями auto отцентрируют блок, так как каждый из отступов будет пытаться занять максимум пространства.

В интерактивном примере ниже у нас имеется простой ряд из флекс-элементов и класс push с заданным margin-left: auto. Вы можете, например, попробовать удалить это значение или добавить класс другому элементу, чтобы увидеть, как работает этот метод. 

В начале этой статьи объясняется, что свойства выравнивания, которые в настоящее время содержатся в спецификации Flexbox Level 1, также включены в спецификацию Box Alignment Level 3, которая в дальнейшем может расширить эти свойства и значения. Мы уже видели, как это произошло с введением значения space-evenly для свойств align-content и justify-content.

Выравнивание во Flexbox также включает в себя другие методы создания пространства между элементами, такие как column-gap and row-gap, как показано в макете CSS Grid Layout. Включение этих свойств в Box Alignment означает, что в будущем мы также сможем использовать column-gap и row-gap во Flexbox разметке. Это означает, что вам не нужно будет использовать отступы, чтобы создать пространство между элементами.

Моё предложение заключается в том, чтобы при изучении выравнивания во Flexbox, делать это параллельно с выравниванием в Grid Layout. В обеих спецификациях используются свойства выравнивания, подобные Flexbox. Вы можете видеть, как эти свойства ведут себя при работе с сеткой в статье Box Alignment in Grid Layout, а также рассмотреть как выравнивание работает в этих спецификациях в статье Box Alignment Cheatsheet.

Смотрите Также

• Выравнивание Коробки
• Выравнивание Коробки в Flexbox (Гибкая Коробка)
• Выравнивание Коробки в Grid Layout (Макет Сетки)

Использование jQuery для центрирования DIV на экране

Редактировать:

Если вопрос научил меня чему-то, то это так: не меняйте то, что уже работает 🙂

Я предоставляю (почти) дословную копию того, как это было обработано на http://www.jakpsatweb.cz/css/css-vertical-center-solution.html — он сильно взломан для IE, но предоставляет чистый способ CSS отвечая на вопрос:

.container {display:table; height:100%; position:absolute; overflow:hidden; width:100%;}
.helper    {#position:absolute; #top:50%;
            display:table-cell; vertical-align:middle;}
.content   {#position:relative; #top:-50%;
            margin:0 auto; width:200px; border:1px solid orange;}

Скрипка: http://jsfiddle.net/S9upd/4/

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

Оригинал:

Похоже, я опоздал на вечеринку!

Выше есть несколько комментариев, которые предполагают, что это вопрос CSS — разделение интересов и все. Позвольте мне предвосхитить это, сказав, что CSS действительно выстрелил себе в ногу на этом. Я имею в виду, как легко это сделать:

.container {
    position:absolute;
    left: 50%;
    top: 50%;
    overflow:visible;
}
.content {
    position:relative;
    margin:-50% 50% 50% -50%;
}

Правильно? Левый верхний угол контейнера будет в центре экрана, а с отрицательными полями содержимое будет волшебным образом появляться в абсолютном центре страницы! http://jsfiddle.net/rJPPc/

Неправильно! Горизонтальное расположение в порядке, но вертикально … О, я вижу. Как видно в css, при установке верхних полей в% значение рассчитывается в процентах всегда относительно ширины содержащего блока . Как яблоки и апельсины! Если вы не доверяете мне или Mozilla doco, поиграйте с скрипкой выше, отрегулировав ширину контента, и удивитесь.

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

<table><tr><td>
    <div>
        <p>I am centered like a boss!</p>
    </div>
</td></tr></table>

А затем позиция контента настраивается со старым добрым полем: 0 auto; :

.super-centered {position:absolute; width:100%;height:100%;vertical-align:middle;}
.content {margin:0 auto;width:200px;}​

Работаю на скрипке, как и обещал: http://jsfiddle.net/teDQ2/

Располагаем новые окна по центру экрана в Fluxbox

Как я уже писал неоднократно ранее, моя рабочая среда — это оконный менеджер fluxbox и ничего более, страшноватый на вид, но эффективный по ресурсам и комфорту использования — удобный, то бишь. Сразу после его установки окна вновь запущенных приложений открываются в том месте, где им удобно. А я хочу, чтобы новые окна открывались по центру экрана. В этой статье я поделюсь своим рецептом центровки окон в Fluxbox.

session.screen0.windowPlacement:	RowMinOverlapPlacement

Возможные значения этого параметра таковы:

• RowSmartPlacement: попытаться разместить окна упорядоченным построчно без перекрытия друг другом.
• ColSmartPlacement: окна будут пытаться размещаться в столбцы, не перекрывая друг друга.
• CascadePlacement: классическое «окна каскадом», т.е. друг поверх друга, с небольшим смещением, чтобы было видно заголовок.
• UnderMousePlacement: новое окно откроется под курсором мыши.

Опции «размещать по центру экрана» не предусмотрено, но для этих целей мы можем использовать специальный конфигурационный файл ~/.fluxbox/apps. В него записываются правила для окон в зависимости от заголовка окна, класса окна программы и других параметров. Используя эти правила, можно привязать конкретную программу к конкретному рабочему столу, например, все мессенджеры открывать на рабочем столе два. Обожаю fluxbox. А также можно указать расположение окон. Чтобы отцентровать новые окна, надо всего лишь добавить в файл apps следующие строчки:

[app] (name!=gimp)
  [Position]	(WINCENTER)	{0 0}
[end]

После перезапуска fluxbox будет размещать все окна по центру, кроме Gimp — я использую Gimp 2.6, и у него все окна с тулбарами оказываются в центре экрана, что неудобно лично мне. Если нужно, чтобы вообще все окна без исключения размещались по центру, сделаем так:

[app] (name=.*)
  [Position]	(WINCENTER)	{0 0}
[end]

Вот и всё. Перезапускаем fluxbox или просто перечитываем его настройки, и вот результат:

💡Узнавайте о новых статьях быстрее. Подпишитесь на наши каналы в Telegram и Twitter.

Поделиться этой статьёй:

Вы здесь: Главная страница » Linux » Располагаем новые окна по центру экрана в Fluxbox

CSS: элемент в центре — dr.Brain

Эта статья будет полезна для тех, кто только начинает свой путь в веб-разработке. Выравнивание элемента по центру — достаточно распространенная задача, но каждый из нас все равно когда-то испытывал связанные с этим затруднения и искал оптимальные способы выравнивания по центру одного блока относительно другого c помощью Google или Stackoverflow. Несомненно, это простая задача. Однако, наличие большого количества элементов и стилей зачастую приводит к обидным ошибкам.

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

Text-align

Метод text-align: center, пожалуй самый распространенный. Обычно он используется для горизонтального выравнивания по центру текста. Кроме того, он успешно используется и для div.

Как это делается?

1. вокруг элемента, который нужно выровнять по центру, создайте родительский блок (обычно он называется wrapper или container),
2. задайте для этого (родительского) элемента CSS-свойство text-align: center,
3. для выравниваемого элемента создайте свойство display: inline-block.

В примере для синего квадрата есть блок-обертка blue-square-container, для которого определено выравнивание текста по центру text-align: center, а для самого квадрата есть свойство display: inline-block.

Следует обратить внимание на то, что по умолчанию для свойства display div получает значение block и поэтому занимает всю доступную ширину 100% и не выравнивается по правилам строчных элементов.

В свою очередь для inline-block элемента:

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

Margin: auto

Другой распространенный способ центрирования блока по горизонтали связан с автовырвниванием левого и правого внешних отступов (например: margin: 0 auto). В этом случае не имеет значения: есть ли родительский элеменет и что с ним происходит.

Мы просто применяем margin: 0 auto к желтому блоку, и это будет работать, если у выравниваемого элемента есть фиксированная ширина.

margin: 0 auto — короткая запись CSS-свойств, определяющая верхний и нижний внешние отступы равными 0, и автоматическое определение ширины для левого и правого внешних отступов.

Важно, чтобы для выравниваемого элемента была установлена фиксированная ширина (в нашем случае для желтого квадрата width: 100px), без нее браузер не сможет рассчитать значения правого и левого внешних отступов, чтобы установить элемент по центру.

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

Еще один интересный прием — установить значение auto только для margin-left или только для margin-right, что позволит сместить элемент, соответственно, вправо или влево (попробуйте).

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

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

Элемет с абсолютным позиционированием выпадает из потока страницы. То есть остальные элементы страницы ведут себя так, будто абсолютно позиционированного элемента вовсе не существует.

Почему это важно?

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

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

1. установить элементу свойство position: absolute,
2. применить свойство left: 50%,
3. установить margin-left равным половине ширины элемента с отрицательным значением.

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

Свойства position: absolute и left: 50% указывают браузеру на необходимость сместить элемент на 50% влево. Но в этом случае на отметке 50% будет находиться левый край центрируемого элемента, а не его середина.

Наконец, для того, чтобы выровнять элемент по центру, мы смещаем его влево на половину ширины, за счет margin-left с отрицательным значением.

Следует помнить, что расчет положения элемента с абсолютным позиционированием осуществляется относительно любого из родительских элементов с установленным свойством “position: relative” или относительно страницы при их отсутствии.

Transform/translate

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

Проделаем это с красным квадратом из второго примера (смотри выше).

Хотя мы все еще применяем абсолютное позиционирование и margin-left: 50%, появляются и два новых CSS-свойства.

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

Вот почему нам нужно еще одно свойство, которое называется transform

С помощью transform можно делать разные крутые штуки, в том числе: смещение, ротацию, масштабирование. Но в данном случае нас интересует именно смещение (translate).

Создаем для центрируемого элемента свойство transform: translate(-50%, -50%), и…

Наш красный квадрат находится в центре как по горизонтали, так и по вертикали страницы.

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

Flexbox

Flexbox — одна из популярных моделей позиционирования и выравнивания элементов на странице.

Если Вы не знакомы с flexbox, воспользуйтесь Flexbox Froggy — это увлекательный и веселый интерактивный способ изучения всех возможностей модели flexbox.

Для того, чтобы разместить элемент в центре (по горизонтали и вертикали) с помощью flexbox, нужно выполнить следующие действия:

1. HTML, body и родительский контейнер должны иметь высоту 100%,
2. для родителського контейнера нужно установить display: flex,
3. так же для родительского контейнера нужно установить align-items: center,
4. еще для родительского контейнера нужно установить justify-content: center.

Устанавливая display: flex, мы создаем flex-контейнер.

align-items: center определяет вертикальное выравнивание всех дочерних элементов по центру родительского.

justify-content: center по действию подобен предыдущему свойству, но работает в другом направлении — горизонтальном.

Этот метод хорош тем, что отлично подходит для адаптивной верстки и не требует вычисления внешних отступов.

Спасибо за внимание.

Перевод статьи Stephen Sun “How to center things with style in CSS “.

Как центрировать плавающие блоки в контейнере, как центрировать плавающие блоки

Плавающие блоки в центре страницы

Div в центре экрана

В CSS макеты на основе плавающих элементов не очень гибкие, однако центрировать их несколько сложнее.

Можно ли центрировать плавающие элементы?

Плавающий div по центру

Это старый вопрос. Вы можете перемещать влево или вправо, но в макете CSS нет возможности перемещать центр.

Размещение элемента DIV в центре экрана

Решить эту проблему несложно.

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

Как отобразить div в центре экрана

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

равно

или можно написать так:

В следующем исходном коде показано, как центрировать Div в середине браузера.

Двухколоночная раскладка Div в центре экрана

Центральные плавающие блоки в контейнере

Исходный код

Положение Div Точно по центру экрана

Центр div на странице по вертикали, центральный div на странице по горизонтали

Точно по центру означает, что Div горизонтально и практически в центре экрана.

Исходный код

Горизонтальные Div в центре браузера

Показать div в центре экрана

Исходный код

Трехколоночная раскладка Div в центре экрана

Поместите div в центр экрана

Исходный код

Абсолютные центральные изображения с CSS

Вот методика того, как вы можете позиционировать элемент по центру по горизонтали и вертикали в CSS.

Центрировать изображения по горизонтали

Чтобы центрировать что-либо по горизонтали в CSS, довольно просто, все, что вам нужно сделать, это установить ширину элемента и применить к изображению автоматические margin-left и margin-right. Браузер определит точное поле как для правой, так и для левой стороны изображения. Это поместит изображение в центр родительского элемента, просто используя свойства ширины и поля.

 img {
     ширина: 250 пикселей;
     маржа: 0 авто;
} 

Центрировать изображения по горизонтали и вертикали

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

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

В этом примере изображение будет центрировано с шириной 250 пикселей, сначала для установки абсолютного позиционирования изображения, а также для свойства top и left равными 50%. Это поместит изображение в середину экрана, но изображение не будет точно по центру.

 img {
   высота: 250 пикселей;
   осталось: 50%;
   позиция: абсолютная;
   верх: 50%;
   ширина: 250 пикселей;
} 

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

 img {
   высота: 250 пикселей;
   осталось: 50%;
   margin-top: -125px;
   маржа слева: -125 пикселей;
   позиция: абсолютная;
   верх: 50%;
   ширина: 250 пикселей;
} 

Центральная кнопка CSS

В этом руководстве объясняется, как центрировать кнопку CSS .

Центральная кнопка CSS

Основная цель CSS (каскадных таблиц стилей) — предоставить лучший стиль для веб-страницы HTML. Используя CSS, вы можете указать расположение всех элементов страницы.Вы можете выравнивать элементы как по горизонтали, так и по вертикали. Кнопка CSS должна быть выровнена по центру, если вы хотите, чтобы она располагалась по центру внутри div или в центре веб-страницы.

Вы можете выровнять кнопку CSS по центру, используя следующий метод:

1. Поместив свойство text-align тега body в центр (text-align: center)

В этом примере мы используем свойство `text-align` center в теге , поэтому все внутри тега будет автоматически выровнено по центру .

  


    
    <стиль>
        тело {
            выравнивание текста: центр;
        }
    


     Наведите меня!  
  

Код запуска

Выход

2. Установив свойство

В этом примере ниже мы используем `text-align` свойство center в теге

  



    
    
    <стиль>
        .button-container-div {
            выравнивание текста: центр;
            граница: сплошной коралл 1px;
            высота: 40vh;
            ширина: 50ввт;
        }
    


    

         Наведите меня! 
    

  

  



    
    
    <стиль>
        .button-container-div {
            ширина: 300 пикселей;
            высота: 300 пикселей;
            маржа: авто;
        }
    


    

         Наведите меня! 
    

  

  




    
    
    <стиль>
        кнопка {
           положение: фиксированное;
           осталось: 50%;
        }
    


    

         Наведите меня! 
    



  

  




    
    
    <стиль>
        .button-container-div {
            ширина: 300 пикселей;
            высота: 300 пикселей;
            граница: 1px solid # ff8899;
            дисплей: гибкий;
            justify-content: center;
            align-items: center;
        }
    


    

         Наведите меня! 
    

  

  


    
    
    <стиль>
        .button-container-div {
            ширина: 300 пикселей;
            высота: 300 пикселей;
            граница: 1px solid # ff8899;
            дисплей: сетка;
        }
        кнопка {
            цвет фона: малиновый;
            цвет: #fff;
            граница: сплошная 1px;
            отступ: 10 пикселей;
            ширина: 100 пикселей;
            наброски: нет;
            маржа: авто;
        }
    


    

         Наведите меня! 
    

  

  html, body {
  маржа: 0px;
  высота: 100%;
}
.коробка {
  ширина: 100%;
  высота: 100%;
  дисплей: таблица;
}
.Внутренняя коробка{
  выравнивание текста: центр;
  дисплей: таблица-ячейка;
  вертикальное выравнивание: по центру;
}  

  html, body {
  маржа: 0px;
}

.наружная коробка {
  ширина: 100%;
  отступ: 60 пикселей 0;
  выравнивание текста: центр;
  фон: оранжевый;
  цвет белый;
}

.Внутренняя коробка {
  ширина: 100 пикселей;
  фон: фиолетовый;
  маржа: 0 авто;
  размер шрифта: 2em;

}

  

  html, body {
  высота: 100%;
  маржа: 0;
}

.коробка {
  высота: 100%;
  фон: фиолетовый;

  дисплей: гибкий;
  justify-content: center;
  align-items: center;
}  

  

  
 1 
  
 2 
  
 3 
  
 4 
  
 5 
  

  

  
 1 
  
 2 
  
 3 
  
 4 
  
 5 
  

  

  
 1 
  
 2 
  
 3 
  
 4 
  
 5 
  

  

  
 1 
  
 2 
  
 3 
  
 4 
  
 5 
  

  

  
 1 
  
 2 
  
 3 
  
 4 
  
 5 
  

  

  
 1 
  
 2 
  
 3 
  
 4 
  
 5 
  

 
  module.exports = {
    варианты: {
      продлевать: {
        
+ alignContent: ['hover', 'focus'],
      }
    }
  }  

 
  модуль.export = {
    corePlugins: {
      
+ alignContent: false,
    }
  }  

  
    ...
  
 

  <таблица>
 

  

    <таблица>
      ...
    
  
 

  
    <таблица>
      ...
    
  
 

  table.center {
    маржа слева: авто;
    маржа-право: авто;
  }
 

  <таблица>
    ...
  
 

  тело {выравнивание текста: центр;}
 

  table # table1 {
    ширина: 70%;
    маржа слева: 15%;
    маржа-право: 15%;
  }
 

  <таблица>
    ...
  
 

  table.center {
    ширина: 70%;
    маржа слева: 15%;
    маржа-право: 15%;
  }
 

  <таблица>
    ...
  
 

  <таблица>
    ...
  
 

  div.container {
    ширина: 98%;
    маржа: 1%;
  }
  table # table1 {
    выравнивание текста: центр;
    маржа слева: авто;
    маржа-право: авто;
    ширина: 100 пикселей;
  }
  tr, td {выравнивание текста: слева;}