Как выровнять a <div> по середине (по горизонтали / ширине) страницы [дублировать]
Вопрос
На этот вопрос уже есть ответ здесь:
- Как горизонтально центрировать <div>? 101 ответ
У меня есть div
метка с width
установить на 800 пикселей.Когда ширина браузера больше, чем 800 пикселей, это не должно растягивать div
, но это должно привести его к середине страницы.
Решение
<body>
<div style="width:800px; margin:0 auto;">
centered content
</div>
</body>
Другие советы
position: absolute
и тогда top:50%
и left:50%
помещает верхний край в вертикальный центр экрана, а левый край - в горизонтальный центр, затем, добавив margin-top
к отрицательному значению высоты div, т. е. -100 сдвигает его выше на 100 и аналогично для margin-left
.Это дает div
точно в центре страницы.
#outPopUp {
position: absolute;
width: 300px;
height: 200px;
z-index: 15;
top: 50%;
left: 50%;
margin: -100px 0 0 -150px;
background: red;
}
<div id="outPopUp"></div>
Современный Гибкий ящик решение - это путь, которым нужно идти в / из 2015. justify-content: center
используется для родительского элемента для выравнивания содержимого по его центру.
HTML
<div class="container">
<div class="center">Center</div>
</div>
CSS - файл
.container {
display: flex;
justify-content: center;
}
.center {
width: 800px;
}
Выходной сигнал
.container {
display: flex;
justify-content: center;
}
.center {
width: 800px;
background: #5F85DB;
color: #fff;
font-weight: bold;
font-family: Tahoma;
}
<div class="container">
<div class="center">Centered div with left aligned text.</div>
</div>
Вы имеете в виду, что хотите расположить его по центру вертикально или горизонтально?Вы сказали, что указали
height
до 800 пикселей, и хотел, чтобы div не растягивался, когдаwidth
было нечто большее, чем это...Для центрирования по горизонтали вы можете использовать
margin: auto;
атрибут в CSS.Кроме того, вам нужно будет убедиться, чтоbody
иhtml
элементы не имеют никаких полей или отступов:
html, body { margin: 0; padding: 0; }
#centeredDiv { margin-right: auto; margin-left: auto; width: 800px; }
Чтобы он также корректно работал в Internet Explorer 6, вы должны сделать это следующим образом:
HTML
<body>
<div class="centered">
centered content
</div>
</body>
CSS - файл
body {
margin: 0;
padding: 0;
text-align: center; /* !!! */
}
.centered {
margin: 0 auto;
text-align: left;
width: 800px;
}
<div></div>
div {
display: table;
margin-right: auto;
margin-left: auto;
}
Вы также можете использовать его следующим образом:
<div style="width: 60%; margin: 0px auto;">
Your contents here...
</div>
Просто используйте center
пометьте сразу после body
пометьте и завершите center
пометьте непосредственно перед body
концы:
<body>
<center>
... Your code here ...
</center>
</body>
Это работало у меня со всеми браузерами, которые я пробовал.
Этого можно легко достичь с помощью гибкого контейнера.
.container{
width: 100%;
display: flex;
height: 100vh;
justify-content: center;
}
.item{
align-self: center;
}
Добавьте этот класс в div, который вы хотите центрировать (который должен иметь заданную ширину).:
.marginAutoLR
{
margin-right:auto;
margin-left:auto;
}
Или добавьте элемент margin в свой класс div, вот так:
.divClass
{
width:300px;
margin-right:auto;
margin-left:auto;
}
Div центрируется по вертикали и горизонтали внутри родительского элемента без фиксации размера содержимого
Здесь, на этой странице это хороший обзор с несколькими решениями, слишком много кода, чтобы делиться им здесь, но он показывает, что возможно...
Лично мне нравится это решение со знаменитым трюком transform translate -50% больше всего.Это хорошо работает как для фиксированной (% или px), так и для неопределенной высоты и ширины вашего элемента.
Код так же прост, как:
HTML:
<div class="center"><div>
CSS - файл:
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); /* for IE 9 */
-webkit-transform: translate(-50%, -50%); /* for Safari */
/* optional size in px or %: */
width: 100px;
height: 100px;
}
Вот скрипка это показывает, что это работает
Используйте Гибкое свойство CSS: http://jsfiddle.net/cytr/j7SEa/6/show/
body { /* Centered */
display: box;
flex-align: center;
flex-pack: center;
}
Некоторые другие ранее существовавшие настройки из более старого кода, которые предотвратят центрирование страницы div L & R, следующие:
- Другие классы, скрытые во внешних ссылках на таблицы стилей.
- Другие классы, встроенные во что-то вроде
img
(как и для старых внешних элементов управления форматом печати CSS). - Код легенды с идентификаторами и / или КЛАССАМИ будет конфликтовать с именованным
div
класс.
Центрирование без указания ширины div:
body {
text-align: center;
}
body * {
text-align: initial;
}
body div {
display: inline-block;
}
Это что-то вроде <center>
тег делает, за исключением:
- все прямые встроенные дочерние элементы (например.
<h1>
) из<center>
также будет располагаться по центру - элемент встроенного блока может иметь разный размер (сопоставимый с
display:block
настройка) в соответствии с настройками браузера по умолчанию
Использование justify-content
и align-items
для выравнивания по горизонтали и вертикали div
https://developer.mozilla.org/de/docs/Web/CSS/justify-content https://developer.mozilla.org/en/docs/Web/CSS/align-items
html,
body,
.container {
height: 100%;
width: 100%;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
.mydiv {
width: 80px;
}
<div class="container">
<div class="mydiv">h & v aligned</div>
</div>
Если у вас есть какой-то обычный контент, а не только одна строка текста, единственная возможная причина, которую я знаю, - это рассчитать маржу.
Вот один из примеров:
HTML
<div id="supercontainer">
<div id="middlecontainer">
<div class="common" id="first">first</div>
<div id="container">
<div class="common" id="second">second</div>
<div class="common" id="third">third</div>
</div>
</div>
</div>
CSS - файл
body {
margin: 0;
padding: 0;
}
.common {
border: 1px solid black;
}
#supercontainer {
width: 1200px;
background: aqua;
float: left;
}
#middlecontainer {
float: left;
width: 104px;
margin: 0 549px;
}
#container {
float: left;
}
#first {
background: red;
height: 102px;
width: 50px;
float: left;
}
#second {
background: green;
height: 50px;
width: 50px;
}
#third {
background: yellow;
height: 50px;
width: 50px;
}
Итак, #supercontainer
является вашим "whole page"
и его width
является 1200px
.
#middlecontainer
является div
с содержанием вашего сайта;это width
102px
.В случае, если width
если содержание известно, вам нужно разделить размер страницы на 2 и вычесть половину содержимого width
из результата:1200 / 2 - (102 / 2) = 549;
Да, я также вижу, что это der grosse сбой CSS.
body, html {
display: table;
height: 100%;
width: 100%;
}
.container {
display: table-cell;
vertical-align: middle;
}
.container .box {
width: 100px;
height: 100px;
background: red;
margin: 0 auto;
}
"width:100%" для тега "body" приведено только для примера.В реальном проекте вы можете удалить это свойство.
Простой http://jsfiddle.net/8pd4qx5r/
html {
display: table;
height: 100%;
width: 100%;
}
body {
display: table-cell;
vertical-align: middle;
}
.content {
margin: 0 auto;
width: 260px;
text-align: center;
background: pink;
}
Используйте приведенный ниже код для центрирования поля div:
.box-content{
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
width: 800px;
height: 100px;
background-color: green;
}
<div class="box-content">
</div>
Это также работает в Internet Explorer, но автоматические поля - нет.
.centered {
position: absolute;
display: inline-block;
left: -500px;
width: 1000px;
margin: 0 50%;
}
<parent>
<child>
</child>
</parent>
parent {
position: relative
}
child {
position: absolute,
left: 50%,
transform: translateX(-50%)
}
<body>
<div style=" display: table; margin: 250 auto;">
In center
</div>
</body>
Если вы хотите изменить вертикальное положение, измените значение 250, и вы сможете упорядочить содержимое в соответствии с вашими потребностями.Нет необходимости указывать ширину и другие параметры.
Если содержимое вашего центра находится глубоко внутри других разделов, то спасти вас может только margin.Больше ничего.Я сталкиваюсь с этим всегда, когда не использую фреймворк, подобный Загрузочный ремень.
В моем случае размер экрана телефона неизвестен, и вот что я сделал.
HTML
<div class="loadingImg"></div>
CSS - файл
.loadingImg{
position: fixed;
top: 0px;
left: 0px;
z-index: 9999999;
border: 0;
background: url('../images/loading.gif') no-repeat center;
background-size: 50px 50px;
display: block;
margin: 0 auto;
-webkit-border-radius: 50px;
border-radius: 50px;
}
JavaScript (прежде чем вам нужно будет показать этот DIV)
$(".loadingImg").css("height",$(document).height());
$(".loadingImg").css("width",$(document).width());
$(".loadingImg").show();
По какой-то причине ни один из предыдущих ответов не сработал для меня по-настоящему.Это то, что сработало у меня, и это также работает во всех браузерах:
.center {
text-align: center;
height: 100%;
/* Safari, Opera, and Chrome */
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
/* Firefox */
display: -moz-box;
-moz-box-pack: center;
-moz-box-align: center;
/* Internet Explorer 10 */
display: -ms-flexbox;
-ms-flex-pack: center;
-ms-flex-align: center;
}
- Получите ширину экрана.
- Затем сделайте запас влево 25%
- Сделайте поле правильным 25%
Таким образом, содержимое вашего контейнера будет располагаться посередине.
Пример:предположим, что ширина контейнера = 800 пикселей;
<div class='container' width='device-width' id='updatedContent'>
<p id='myContent'></p>
<contents></contents>
<contents></contents>
</div>
if ($("#myContent").parent === $("updatedContent"))
{
$("#myContent").css({
'left': '-(device-width/0.25)px';
'right': '-(device-width/0.225)px';
});
}
.middle {
margin:0 auto;
text-align: center;
}
/* это выводит div в центр */