Css выравнивание текста по центру блока

Навигация по сайту

Created 5 May 2001; Last updated Вт 05 ноя 2019 19:12:56

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

Ниже представлены основные способы решения задачи, их плюсы и минусы. Чтобы понимать суть примеров, рекомендую уменьшить высоту / ширину окошка Result в примерах по указанным ссылкам.

Вариант 1. Отрицательный отступ.

Позиционируем блок атрибутами top и left на 50%, и заранее зная высоту и ширину блока, задаём отрицательный margin, который равен половине размера блока. Огромным минусом данного варианта является то, что нужно подсчитывать отрицательные отступы. Так же блок не совсем корректно ведёт себя в окружении скроллбаров — он попросту обрезается так как имеет отрицательные отступы.

Вариант 2. Автоматический отступ.

Менее распространённый, но схожий с первым. Для блока задаём ширину и высоту, позиционируем атрибутами top right bottom left на 0, и задаём margin auto. Плюсом данного варианта являются рабочие скроллбары у родителя, если у последнего задана 100% ширина и высота. Минусом данного способ является жёсткое задание размеров.

Вариант 3. Таблица.

Задаём родителю табличные стили, ячейке родителя устанавливаем выравнивание текста по центру. А блоку задаём модель строчного блока. Минусами мы получаем не рабочие скроллбары, и в целом не эстетичность «эмуляции» таблицы.

Чтобы добавить скролл в данный пример, придётся добавить в конструкцию ещё один элемент. Пример: jsfiddle.net/serdidg/fk5nqh52/3.

Вариант 4. Псевдо-элемент.

Данный вариант лишён всех проблем, перечисленных у предыдущих способов, а так же решает первоначально поставленные задачи. Суть состоит в том, чтобы у родителя задать стили псевдо-элементу before, а именно 100% высоту, выравнивание по центру и модель строчного блока. Так же само и у блока ставится модель строчного блока, выравнивание по центру. Чтобы блок не «падал» под псевдо-элемент, когда размеры первого больше чем родителя, указываем родителю white-space: nowrap и font-size: 0, после чего у блока отменяем эти стили следующими — white-space: normal. В данном примере font-size: 0 нужен для того, чтобы убрать образовавшийся пробел между родителем и блоком в связи с форматированием кода. Пробел можно убрать и иными способами, но лучшим считается просто его не допускать.

либо, если вам нужно, чтобы родитель занимал только высоту и ширину окна, а не всей страницы:

Вариант 5. Flexbox.

Одним из самых простых и элегантных способов является использования flexbox. Он не требует лишних телодвижений, достаточно понятно описывает суть происходящего, обладает высокой гибкостью. Единственное, что стоит помнить при выборе данного способа — поддержка IE от 10-й версии включительно. caniuse.com/#feat=flexbox

Вариант 6. Transform.

Подходит в случае если мы ограничены структурой, и нет возможности манипулировать родительским элементом, а блок выровнять как-то нужно. На помощь придёт css функция translate() . При значение 50% абсолютное позиционирование расположит верхний левый угол блока точно по центру, затем отрицательное значение translate сдвинет блок относительно своих собственных размеров. Учтите, что могут всплыть негативные эффекты в виде размытых граней или начертания шрифта. Также подобный способ может привести к проблемах с вычислением положения блока с помощью java-script’а. Иногда для компенсации потери 50% ширины из-за использования css свойства left может помочь заданное у блока правило: margin-right: -50%; .

Вариант 7. Кнопка.

Пользователь azproduction предложил вариант, где блок обрамляется в тег button. Кнопка имеет свойство центрировать всё, что находится у неё внутри, а именно элементы строчной и блочно-строчной (inline-block) модели. На практике использовать не рекомендую.

vertical-align: middle

Свойство CSS выравнивает элемент по вертикали относительно родительского элемента, окружающего текста или ячейки таблицы. Однако с ним не все так просто. Это свойство работает только для inline-элементов (span, img и т.д) и элементов с ;

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

Для того, чтобы этот метод работал, как задумано, нужно задать абсолютные (в px) размеры родительского элемента. У дочернего элемента ширина и высота могут быть относительными (например, в %).

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

text-align

Для центрирования инлайновых элементов – достаточно поставить родителю text-align: center :

Для центрирования блока это уже не подойдёт, свойство просто не подействует. Например:

margin: auto

Блок по горизонтали центрируется margin: auto :

В отличие от width/height , значение auto для margin само не появляется. Обычно margin равно конкретной величине для элемента, например 0 для DIV . Нужно поставить его явно.

Значение margin-left:auto/margin-right:auto заставляет браузер выделять под margin всё доступное сбоку пространство. А если и то и другое auto , то слева и справа будет одинаковый отступ, таким образом элемент окажется в середине. Детали вычислений описаны в разделе спецификации Calculating widths and margins.

Вертикальное центрирование — это сложно

Как я и сказал, вертикальное центрирование раньше было полным безумием. Нужно было поместить выравниваемый элемент в родительский на высоте в 50%, дать ему верхний отступ в 50%, а потом заполнить специальную декларацию. Ах да, иногда это работало временно, и через несколько дней приходилось повторять всё сначала.

Senior Frontend Engineer

Cube Dev, Удалённо, От 3000 $

tproger.ru

Вакансии на tproger.ru

Сейчас всё стало гораздо проще. Если вы пользуетесь Flexbox, то знаете, что эту проблему можно решить одной командой, или (в зависимости от направления главной оси).

Вы, должно быть думаете: «Но есть же свойство , что оно делает?» Да ничего, за исключением HTML-таблиц. Не слышали о них? И хорошо, всё равно использовать их сейчас — моветон. Вас просто не поймут коллеги. Почему? Потому что, как и «Иванушки International», они были слишком популярны в 90-е и уже всем надоели.

Некоторые утверждают, что работает со строчными элементами. Врут и не краснеют, не верьте им.

Картинка по центру – JediCSS

Самый простой способ поставить картинку по центру — флекс.

В примере изображения, но вместо них может быть див, спан или чекбокс. Работает одинаково для всех элементов.

Картинка по центру

Фотограф: Hans Pollner

.content-centering{
display:flex;
justify-content: center; /*центрируем элемент по горизонтали */
align-items: center; /* и вертикали */
width: 200px; /* задали размеры блоку-родителю */
height: 200px;
overflow: hidden; /* если элемент больше блока-родителя – обрезаем лишнее */
}

Картинка становится по центру блока, внутри которого находится. Если она больше блока-родителя, края обрезаются.

Вся картинка в пределах блока-родителя

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

.content-centering_element{
    max-width: 100%;
}

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

Чтобы исправить положение, допишем ограничение по высоте:

.content-centering_element{
    max-width: 100%;
    max-height: 100%;
}

Картинка в пределах блока-родителя, а лишнее отсекается

На предыдущем этапе вертикальная картинка вписалась удачнее: она заняла всю ширину блока, а по высоте обрезалась.

Сделаем так и для горизонтального изображения. Понадобится два класса:

.element_horizont{ /* для горизонтальных изображений */
    max-height:100%;
}
.element_vertical{ /* и для вертикальных */
  max-width:100%; 
}

Чтобы не прописывать классы вручную, добавим скрипт. Он определяет большую сторону картинки и добавляет ей соотвествующий класс.

Краткий обзор

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

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

Существуют четыре способа позиционирования боксов:

Static

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

Absolute

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

Relative

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

А теперь — углубимся.

Вертикальное и горизонтальное центрирование в CSS уровня 3

Мы можем расширить оба метода, чтобы центрировать по горизонтали и по вертикали одновременно.

Побочный эффект абсолютного позиционирования абзаца состоит в том, что абзац становится ровно таким широким, каким он должен быть (если только мы явно не укажем ширину). В примере ниже мы именно этого и хотим: мы размещаем по центру абзац из одного слова (“Центр!“), так что ширина абзаца должна быть равна ширине этого слова.

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

В плане вертикального центрирования эта таблица стилей схожа с таблицей из предыдущего примера. Но теперь мы ещё перемещаем элемент на полпути через контейнер с помощью правила ‘left: 50%’ и одновременно сдвигаем его влево на половину своей собственной ширины в преобразовании ‘translate’:

Следующий пример объясняет, зачем требуется правило ‘margin-right: -50%’.

Когда форматер CSS поддерживает ‘flex’, всё становится ещё легче:

с этой таблицей стилей:

т.е. единственным дополнением является ‘justify-content: center’. Точно также, как ‘align-items’ определяет вертикальное выравнивание содержимого контейнера, ‘justify-content’ таким же образом определяет горизонтальное выравнивание. (На самом деле всё несколько сложнее, как следует из их названий, но в простом случае, работает это именно так.). Побочный эффект от применения свойства ‘flex’ состоит в том, что дочерний элемент, в нашем случае это Р, автоматически становится настолько малым, насколько это возможно.

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

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

Координаты означают расстояние бокса от краев: означает, что бокс прижат к верхнему краю, — что отстоит на 10 пикселов от правого края и т.д. Любая из координат необязательна. В случае, если координаты не задают вертикального или горизонтального положения, то оно остается таким же, какое было бы без позиционирования. То есть в случае, когда у нас есть два произвольных бокса один за другим «box1» и «box2»:

… и второй мы позиционируем так:

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

Стакан

Возможно некоторых особенно въедливых читателей уже какое-то время беспокоит вопрос, который я намеренно опустил в начале: относительно каких таких краев двигают бокс координатные свойства? Вопрос этот не совсем тривиален, потому что хотя интуитивно и кажется, что все позиционируется «от окна», это не всегда так.

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

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

Используя более принятые в CSS термины, этот стакан называется «содержащим блоком» (containing block).

Fixed

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

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

Автоматические размеры

У абсолютного позиционирования есть крайне полезное свойство: им можно задавать размеры боксы по их внешним границам. Раньше я рассказывал о том, что если задавать размеры свойствами width и height, то отступы, рамки и границы добавляются к ним. Это неудобно, когда надо вместить бокс со всеми окружающими его красивостями в дырку точно известного размера. При абсолютном позиционировании эта проблема решается указанием координат противоположных сторон одновременно:

Этот бокс с заданными левой и правой координатами будет точно касаться боковых сторон своего стака… э-э-э… содержащего блока, какой бы ширины тот ни был, а margin’ы и padding’и будут откладываться внутрь бокса.

Это свойство неоценимо при создании раскладок веб-приложений, где неперекрывающиеся боксы должны занимать весь экран по определенной сетке:

Засада

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

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

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

Здесь видны две проблемы:

Колонки не получается выровнять по высоте, потому что колонки друг в друге не лежат, и в CSS нет средств сказать «высота как вот у того другого бокса».
Нижний блок проваливается за колонки, потому что они изымаются из потока, и нижний блок по высоте не толкают. И его нельзя абсолютно позиционировать под самой высокой колонкой, потому что в CSS нет средств сказать «верх под тем другим боксом».

По центру по горизонтали

Встроенные или встроенные элементы (например, текст и ссылки)

Чтобы центрировать встроенные элементы в родительском контейнере на уровне блока, просто используйте：

<p data-height=»268″ data-theme-id=»0″ data-slug-hash=»HulzB» data-default-tab=»result» data-user=»chriscoyier» class=’codepen’>See the Pen <a href=’http://codepen.io/chriscoyier/pen/HulzB/’>Centering Inline Elements</a> by Chris Coyier (<a href=’http://codepen.io/chriscoyier’>@chriscoyier</a>) on <a href=’http://codepen.io’>CodePen</a>.</p> <script async src=»https://assets.codepen.io/assets/embed/ei.js»></script>

Этот метод может центрировать элементы inline / inline-block / inline-table / inline / flex и других типов.

Блочный элемент

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

<p data-height=»268″ data-theme-id=»0″ data-slug-hash=»eszon» data-default-tab=»result» data-user=»chriscoyier» class=’codepen’>See the Pen <a href=’http://codepen.io/chriscoyier/pen/eszon/’>Centering Single Block Level Element</a> by Chris Coyier (<a href=’http://codepen.io/chriscoyier’>@chriscoyier</a>) on <a href=’http://codepen.io’>CodePen</a>.</p> <script async src=»https://assets.codepen.io/assets/embed/ei.js»></script>

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

Множественные блочные элементы

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

<p data-height=»268″ data-theme-id=»0″ data-slug-hash=»ebing» data-default-tab=»result» data-user=»chriscoyier» class=’codepen’>See the Pen <a href=’http://codepen.io/chriscoyier/pen/ebing/’>Centering Row of Blocks</a> by Chris Coyier (<a href=’http://codepen.io/chriscoyier’>@chriscoyier</a>) on <a href=’http://codepen.io’>CodePen</a>.</p> <script async src=»https://assets.codepen.io/assets/embed/ei.js»></script>

Если вы хотите центрировать несколько элементов уровня блока в вертикальном направлении, вы все равно можете установить с участием Для выполнить:

<p data-height=»268″ data-theme-id=»0″ data-slug-hash=»haCGt» data-default-tab=»result» data-user=»chriscoyier» class=’codepen’>See the Pen <a href=’http://codepen.io/chriscoyier/pen/haCGt/’>Centering Blocks on Top of Each Other</a> by Chris Coyier (<a href=’http://codepen.io/chriscoyier’>@chriscoyier</a>) on <a href=’http://codepen.io’>CodePen</a>.</p> <script async src=»https://assets.codepen.io/assets/embed/ei.js»></script>

По вертикали

С вертикальным центрированием в CSS все немного сложнее:

Это элемент строчного типа или строчно-* (как текст или гиперссылки)?

Он помещается в одну строку?

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

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

Элемент занимает несколько строк?

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

Если вы имеете дело с некоей имитацией таблицы, может быть, стоит использовать
flexbox? Один дочерний flex-элемент можно довольно легко отцентрировать во
flex-родителе.

Помните, что этот способ подходит только если у родительского контейнера указана
конкретная ширина (px, % и т.д.), поэтому здесь у контейнера есть высота.

Если оба этих способа не подходят, можно использовать приём «элемент-призрак», при
котором в контейнер помещается псевдоэлемент с максимальной высотой, и текст
выравнивается по горизонтали по этому элементу:

Это блочный элемент?

Вам известна высота элемента?

Обычно, когда речь идёт о веб-странице, высота может быть неизвестна
по многим причинам: если изменяется ширина элемента, перераспределение текста
может изменить высоту. Вариации в стилизации текста могут
изменить высоту. Изменение количества текста может
изменить высоту элемента. Элементы с фиксированным соотношением сторон, например,
изображения, могут изменить высоту при масштабировании — и так далее.

Но, если вам известна высота, вертикальное центрирование можно сделать так:

Относительное позиционирование

Относительное позиционирование — странная штука. Если судить по картинке выше, то оно похоже на абсолютное, но к нему зачем-то добавляется странный эффект: бокс продолжает занимать место в потоке. Действительно, именно для позиционирования боксов этот метод используется редко. Хотя изредка и бывают ситуации, когда надо ради визуальных эффектов пододвинуть один бокс под другой.

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

Вот пример, который показывает полезность этого свойства. Пусть у нас есть три блока: «заголовок», «содержимое» и «низ», а внутри «содержимого» лежит блок «об авторе»:

И пусть высота заголовка нам точно не известна. Боксы эти статические, идут один за другим, и какая бы высота у заголовка ни была, содержимое будет начинаться прямо под ним.

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

Напишем ему:

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

Вот это и есть случай, в котором работает . Если мы поставим его блоку содержимого, то он никуда не денется из потока, но в то же время станет содержащим блоком, и «об авторе» расположится в его правом верхнем углу.

6 ответов

Лучший ответ

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

Вот рабочий код. Просмотреть на JSFiddle

Давайте разберемся, что здесь происходит.

Настройка нового содержащего блока

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

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

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

С технической точки зрения мы здесь создаем новый для дочернего элемента. .

Размещение псевдоэлемента

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

Однако если вы сделаете именно это, вы увидите, что это выравнивает левый край псевдоэлемента на 50%. Это не то, что мы хотим — мы хотим, чтобы центр псевдоэлемента находился посередине. И поэтому я добавил минус . Это немного сдвинет его, чтобы выровнять середину с центром родителя.

И как только мы это сделаем, он будет центрирован! Блеск!

Почему мой не работал?

Автоматическая величина маржи рассчитывается по довольно сложному алгоритму. Иногда он вычисляется до 0. Я знаю по опыту, что это один из таких случаев, хотя я еще не проследил свой путь через алгоритм, чтобы понять, почему именно. Если вы хотите пройти через это,

116

jamesplease
29 Май 2013 в 16:30

С элементом pesudo: после или: до использования display: inline-block;

Попробуйте что-то вроде этого:

ocram88
20 Сен 2019 в 09:20

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

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

Чтобы использовать этот метод, свойства и должны быть установлены на , чтобы был эффективным.

Этот метод может быть расширен и для реализации горизонтального центрирования.

См. ссылку для получения полной информации:

Community
20 Июн 2020 в 09:12

Не имеет прямого отношения (уже проголосовали за jmeas), но вам также может быть проще использовать трюк с границами CSS для создания треугольника. например

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

MarkP
13 Апр 2015 в 15:26

Не лучше было бы просто определить ширину в процентах, сделать его блочным элементом и выровнять его по центру?

«поплавок: центр;» недействителен и не будет работать. Смешивание плавающих и абсолютных позиционированных элементов — верный способ получить проблемы с макетом, поскольку они не так хорошо работают вместе.

Попробуйте что-то вроде этого:

Hexdom
26 Июн 2017 в 11:52