div по центру
Здравствуйте, подскажите как выровнять div по центру экрана ( по горизонтали и вертикали ), если ширина и высота у него заданы в процентах
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>…</title>
<style>
html, body, .wrapper {
height: 100%;
}
.wrapper {
display: flex;
}
.centered {
width: 50%;
height: 50%;
margin: auto;
background-color: #3fc;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="centered">Centered</div>
</div>
</body>
</html>
|
Цитата:
Пример тут html,
body {
position: relative;
min-height: 100%;
}
html {
height: 100%;
}
.block-vertical {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
font-size: 0.001px;
text-align: center;
}
.block-vertical:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.block-vertical-middle {
display: inline-block;
width: 80%;
height: 70%;
max-width: 100%;
font-size: 14px; /* font-size: 1rem; */
vertical-align: middle;
border: 1px solid #f00;
}
<div class="block-vertical">
<div class="block-vertical-middle">Блок по центру страницы</div>
</div>
|
BelkinV, если нужен фиксированный блок, то не проще так?
|
Горизонталь:
у блока margin 0 auto, у его родителя text align center Вертикаль, лень писать скрипт... суть в том, что взять надо высоту дока без учета отступов, высоту блока с учетом бордеров, вычесть разницу и поделить ее на 2, округлить, результат релативом от верху(в топ).... а если не подойдет применение релатива, то через абсолют, но тогда придется добавить обертку, от которой и будет проходить позиционирование блока но тогда она должна быть такой же ширины, как блок, блоку тогда и лефт прописать 0.... ну и к обертке применить описанное к горизонтали... Ну чисто стилями по вертикали не выровнять без таблиц но и там свои нюансы по вертикальному выравниванию, точно не помню, но вроде блочные элементы не выравниваются... вообщем не парюсь по этому поводу before, after и тп хрень не работает в куче мобильных или облегченных браузеров, смотря просто на что ориентирован сайт, под то и подстраиваться... некоторые забивают на всякие недобраузеры или относительно старые версии, в некоторых случаях это недопустимо и приходится искать более простые пути решения. |
Цитата:
1. margin: auto для flexbox 2. margin: auto для для абсолютно позиционированного блока 3. vertical-align: middle для inline-block Цитата:
|
Octane,
1,2 С каких пор margin auto кроссбраузерно? :blink: Особенно для вертикали.... 3. Читаем внимательно и до конца, а не вырываем из контекста... 4. Да, мы уже в 2014 году, но разработчики браузеров для мобильных устройств, телевизоров и прочей подобной недотехники, все еще нет... Очень много обыденного для PC браузеров винды(про ай вообще молчу, да и отличие местами под линуксы, не говорю о шрифтах, а о том, как отрабатывают базовые функции, что они возвращают... а какой ужас, когда это не какой то с распространенных браузеров. Порой даже хром чудит, как между версиями, так и между ОС) все еще не доступно на портативное устройство, тв и прочую технику! Техника, где уже не выходят обновления из-за устаревания ОС, особенно если она не с массово распространенных... их продолжают использовать. Не во всех случаях можно забивать на конечного пользователя. Вот чувак допустим купил плазму за 3-7куе в 2012м году свежую модельку, обновлений для браузера спустя 2 года нет, заходит на какой то сайт с платным контентом или где можно сделать заказ, а тут бац и он весь разваливается.... Думаю этот человек не выкинет свой тв но и не побежит к буку/планшету/мобилке/стац компу.... а просто свалит с такого гамносайта на другой, а это уже упущенная выгода для ресурса... Если человек еще в саппорт обратиться, что сайт гамно и на его плазме которой только 2года, все разваливается и он не может пользоваться услугами, за которые заплатил или хотел преобрести..., если один два таких в месяц/квартал то возможно проигнорят, но а если таких будут сотни, будут по ушах ездить разработчику, вплоть до смены такового.... ибо выкинуть технику клиенту предлагать не будут... Не следует думать, что на тв и тп технику обновы столь же стабильно выходят, как для обычных компов.... подобная техника поддерживается первый год, максимум два, дальше идет отказ от поддержи этой модели, не будут заниматься портированием под старье новых фитч во встраиваемый софт, ни кто и ни где, особенно если техника имеет жесткие аппаратные ограничения... Вот у меня даже сейчас случай, купил аппарат, модель свежая 2014го года, среднего ценового диапазона, ОС конца предыдущего, пока обновлений особых нет. Хочу сетапать и пользовать разный софт, часть платного, в большинстве случаев находил нужный но столкнулся с определенными проблемами благодаря разработчикам. Вроде и приложение раскрученное, ну денег не мало но и не много просят... Но им(конторе, разрабатывающей и продающей приложение) проще вернуть деньги за приобретенный пользователем софт нежели вносить изменения в таковой, что бы устранить проблему, связанную с завтыком их разработчика. Так же думал тот разраб, что мы в 2014м году и последняя версия ОС будет норм да и железо в этом году со всем справится, да и есть не мало с требований, которым должно оно удовлетворять для сетапа ОС, а не тут то было... Думаю там еще будут задалбывать саппорт люди, которые купили софт, но потом не смогут пользоваться... Вот такой 2014й год.... провтыкали в разработке, сделали баг благодаря недочету, пофиг, не получили/вернули денег, пофиг, зубы на полку, пофиг... зато 2014й год |
Цитата:
|
danik.js, в некоторых мобильных, или даже во всех. Я про это:
bottom: 0; left: 0; margin: auto; right: 0; position: fixed/absolute; top: 0; |
Цитата:
Дальше не осилил, многа курсивных букаф |
| Часовой пояс GMT +3, время: 16:33. |