Как вертикально отцентрировать блок в контейнере?

@Vadizar Там вопрос некачественный (код картинкой), и там я так понял, вопрос больше про отступы, чем просто центрирование.

28 янв 2017 в 12:54

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

31 янв 2017 в 11:12

Поставил минус данному вопросу, т.к. автору были даны ответы, он ничего не выбрал и никак не комментирует это.

12 фев 2017 в 22:03

4 ответа 4

Сортировка: Сброс на вариант по умолчанию

Проще всего это сделать через flexbox.

.container-fluid < height: 400px; background-color: lightgreen; display: flex; /* Центрируем по вертикали */ align-items: center; /* Центрируем по горизонтали */ justify-content: center; >

  
 
 
 
 
Some Button
 
 
 
 

Отслеживать
ответ дан 28 янв 2017 в 8:24
Vadim Ovchinnikov Vadim Ovchinnikov
9,644 4 4 золотых знака 35 35 серебряных знаков 72 72 бронзовых знака
Это не сработает в IE 9. А IE 10 и 11 только частичная поддержка.
28 янв 2017 в 12:25

@Vadizar Я думаю, что можно уже спокойно не поддерживать IE9, иногда даже IE10. А для IE11 это прекрасно работает, можете проверить.

28 янв 2017 в 12:29

@Vadizar Вы так заботитесь о поддержке старых браузеров, как будто это самое главное в веб-разработке. Кому надо, пусть даже IE6 поддерживает и ищет нужные устаревшие способы.

28 янв 2017 в 12:31

@Vadizar Кстати использовать polyfill для старых браузеров — тоже адекватное решение. Поэтому мне кажется вы скорей любите «антиквариат», чем ориентируетесь на практическую пользу в своих решениях.

28 янв 2017 в 12:37

@Vadizar Вы «основами» называете устаревшие и в данном случае намного менее сопроводаемые способы создания разметки. Посмотрите сколько у вас кода занимает просто расположение элемента по вертикали, а также необходимость !improtant , что не есть хорошо. Но вы обязательно будете хвастаться «Зато в IE9 работает», который нужно сейчас поддерживать очень мало кому.

Как отцентрировать текст в кнопке?

Нужно сделать кнопку с поддержкой IE9, Chrome, FireFox. Чтобы кнопка могла растягиваться под текст и была отцентрирована. Вроде все сделал, на платформе https://jsfiddle.net/bsy4vew6/ отображается все корректно. Но когда открываю файл через хром, то идёт отображение прибитого к полу текста.

Что я сделал не так?

• Вопрос задан более трёх лет назад
• 1992 просмотра

2 комментария

Простой 2 комментария

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

Еле как отцентрировал кнопку через Grid, используя тег button, но если хочу сделать через тег a? Кнопка расплывается по экрану, пробовал через inline-block тоже не получается, только если двигать margin’ом вправо, что сразу делает эластичность кнопки никакой. Вроде задача несложная, но просто до меня не доходит, как сделать это красиво.

/* ======SERVISES====== */ .servises < display: flex; margin: 100px 0; >.servises__item < width: 33.333333%; text-align: center; padding-bottom: 100px; >.servises__title < text-align: center; color: #000; padding-top: 150px; font-size: 55px; letter-spacing: 0px; padding-bottom: 150px; >.servises__icon < margin-bottom: 70px; >.servises__subtitle < color: #787878; margin-bottom: 80px; font-size: 45px; >.servises__text < font-size: 25px; color: #787878; font-weight: 100; max-width: 450px; >.servises__btn < display: grid; align-items: center; justify-items: center; text-align: center; font-size: 23px; text-decoration: none; text-transform: uppercase; padding: 25px 65px; background: linear-gradient(to bottom, #5e407c, #4a50a8); background-size: 200%; color: #fff; border-radius: 50px; margin: 70px auto; border: 0; cursor: pointer; transition: 1s; >.servises__btn:active

KREA.
 
 
 
 
Consultacy
 
Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam itaque quibusdam non consequuntur? Commodi, illum! Nostrum expedita laboriosam officia, eligendi libero quos, eos ad aperiam mollitia quia enim velit. Deleniti.
 
 
 
Mentorship
 
Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam itaque quibusdam non consequuntur? Commodi, illum! Nostrum expedita laboriosam officia, eligendi libero quos, eos ad aperiam mollitia quia enim velit. Deleniti.
 
 
 
Incubatory
 
Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam itaque quibusdam non consequuntur? Commodi, illum! Nostrum expedita laboriosam officia, eligendi libero quos, eos ad aperiam mollitia quia enim velit. Deleniti.
 
 
 
 GET IN TOUCH

Как с помощью position fixed расположить элемент точно по центру?

Создаете блок, в котором будет модальное окно. Задаете ему:

.modal-wrapper

Саму модалку делаете какой хотите.
Ответ написан более трёх лет назад
Нравится 5 1 комментарий

Иван Доброславин @derzost_namereniya

Великолепно! Огромное спасибо!

P.S. Как дополнение z-index: 999 или другим большим числом, чтобы поверх всего.

Ответы на вопрос 1

Ответ написан более трёх лет назад
Нравится 2 1 комментарий

Хотелось бы дополнить ответ спустя год.

Минус такого подхода в том, что если в сумме элемент (например контейнер попапа) будет иметь непарную высоту (например 701px), то в Chrome текст внутри будет размытым. Нужно будет или уменьшить/увеличить отступ на 1px, или изменить междустрочное расстояние.

Ваш ответ на вопрос

Войдите, чтобы написать ответ

• HTML
• +1 ещё

Как пофиксти проблему с амперсантом?

• 1 подписчик
• 15 часов назад
• 66 просмотров