Мне нужно разместить элемент div (с position:absolute;) в центре моего окна. Но у меня возникают проблемы, потому что ширина неизвестна.
Я пробовал это. Но его нужно отрегулировать, так как ширина отзывчивая.
.center {
left: 50%;
bottom: 5px;
}
Как я могу это сделать?
Это работает для меня:
#content {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 100px; /* Need a specific value to work */
}<body>
<div>
<div id="content">
I'm the content
</div>
</div>
</body>display: table; с этим
- person Chris Edwards; 22.01.2014
$(".parentElement").bind("click", function(){ $(".parentElement").find("a").trigger("click"); }); Может показаться хакерским, но у меня это работает в производственной среде. Возможно, вам придется вызвать google.maps.events (щелчок) в вашем случае или другую комбинацию событий.
- person Sean Kendle; 20.03.2014
width должно быть установлено на определенное значение, чтобы это работало. auto и 100% не будут центрировать элемент. display: block; обязательно. position: absolute; НЕ является обязательным. Все значения будут работать. Для position родительского элемента должно быть установлено значение, отличное от static. Устанавливать left и right на 0 не нужно. margin-left: auto; margin-right: auto; сделает всю работу.
- person Onur Yıldırım; 27.06.2014
text-align:center; сработает, если у этого div есть дочерние элементы, поскольку дочерние элементы будут выровнены по центру.
- person Janaka Dombawela; 08.06.2015
top: 0; bottom: 0; и использовать сокращение margin: auto.
- person NaN; 28.07.2016
left: 50%; transform: translate(-50%, 0); думаю.
- person Alexander Goncharov; 17.08.2016
max-content и min-content в большинстве браузеров.
- person Peter Moore; 29.10.2019
Вот хорошее решение для адаптивного дизайна или неизвестных размеров в целом, если вам не нужна поддержка IE8 и ниже.
.centered-axis-x {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
.outer {
position: relative; /* or absolute */
/* unnecessary styling properties */
margin: 5%;
width: 80%;
height: 500px;
border: 1px solid red;
}
.inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* unnecessary styling properties */
max-width: 50%;
text-align: center;
border: 1px solid blue;
}<div class="outer">
<div class="inner">I'm always centered<br/>doesn't matter how much text, height or width i have.<br/>The dimensions or my parent are irrelevant as well</div>
</div>Подсказка в том, что left: 50% относится к родительскому элементу, а преобразование translate относится к ширине / высоте элементов.
Таким образом, у вас есть идеально центрированный элемент с гибкой шириной как для дочернего, так и для родительского элементов. Бонус: это работает, даже если ребенок больше родителя.
Вы также можете центрировать его по вертикали с помощью этого (и, опять же, ширина и высота родительского и дочернего элементов могут быть полностью гибкими (и / или неизвестными)):
.centered-axis-xy {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
Имейте в виду, что вам также может потребоваться префикс transform vendor. Например -webkit-transform: translate(-50%,-50%);
webkit-, как я предлагал.
- person ProblemsOfSumit; 12.02.2015
filter, но для этого требуется margin-left и margin-right, чтобы установить источник преобразования середина...
- person cheich; 26.02.2015
margin: 0 auto для IE8 и решение transform для современных браузеров. Это, конечно, работает только для центрирования оси x.
- person ProblemsOfSumit; 26.02.2015
.inner суммировались с рассчитанной внутренней шириной div. jsfiddle.net/b1tav6xx/6 Однако, когда ширина экрана мала, входные данные переносятся под кнопки.
- person poshest; 14.03.2015
transform: translate, похоже, делает position: fixed непригодным для использования детьми. В этом случае принятый ответ работает лучше.
- person dmvianna; 01.04.2015
transform свойства изменят поведение fixed детей. Это широко обсуждаемое поведение, но его легко обойти.
- person ProblemsOfSumit; 01.04.2015
fixed.
- person ProblemsOfSumit; 01.04.2015
@include vendor(transform, translate(-50%, -50%));
- person Adam Spence; 01.04.2015
right: 50%; transform: translate(50%, 0);. Если div с предварительным преобразованием выходит за правый край страницы, это может вызвать появление горизонтальной полосы прокрутки, но не создает полосу прокрутки, если она выходит за левый край страницы.
- person RandomEngy; 20.09.2017
position: relative; jsfiddle.net/8z9a3fbr Если вы имеете в виду поведение переноса текста, это нет предела. Вот текст в одну строку: jsfiddle.net/8z9a3fbr/1 Вы также можете дать ребенку любой witdth или min-width. Как я уже сказал, здесь нет ограничивающего фактора.
- person ProblemsOfSumit; 11.05.2019
draggableElement.style.transform = 'initial';.
- person Ruby Tunaley; 24.10.2020
Я просто хотел добавить, что если кто-то хочет сделать это с помощью одного тега div, то вот выход:
Принимая width как 900px.
#styleName {
position: absolute;
left: 50%;
width: 900px;
margin-left: -450px;
}
В этом случае нужно заранее знать width.
"because the width is unknown" ... это не ответ на вопрос
- person Michel Ayres; 03.10.2013
Абсолютный центр
HTML:
<div class="parent">
<div class="child">
<!-- content -->
</div>
</div>
CSS:
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
Демо: http://jsbin.com/rexuk/2/
Он был протестирован в Google Chrome, Firefox и Internet Explorer 8.
<div style='position:absolute; left:50%; top:50%; transform: translate(-50%, -50%)'>
This text is centered.
</div>
Это центрирует все объекты внутри div с типом положения статическим или относительным.
059%: Вы имеете в виду 50%? Если да, ответьте отредактируйте свой ответ, а не здесь, в комментариях.
- person Peter Mortensen; 20.06.2020
transform: translate()!
- person BergListe; 16.11.2020
Это работает как по вертикали, так и по горизонтали:
#myContent{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
И если вы хотите сделать элемент центром родительского элемента, установите положение родительского родственника:
#parentElement{
position: relative
}
Для выравнивания по центру по вертикали установите высоту элемента. Спасибо Раулю.
Если вы хотите сделать элемент центром родительского элемента, установите положение родительского элемента относительно
Предполагая, что элемент в div - это еще один div ...
Это решение отлично работает:
<div class="container">
<div class="center"></div>
</div>
Контейнер может быть любого размера (должен быть относительным):
.container {
position: relative; /* Important */
width: 200px; /* Any width */
height: 200px; /* Any height */
background: red;
}
Элемент (div) также может быть любого размера (должен быть меньше контейнера):
.center {
position: absolute; /* Important */
top: 50%; /* Position Y halfway in */
left: 50%; /* Position X halfway in */
transform: translate(-50%,-50%); /* Move it halfway back(x,y) */
width: 100px; /* Any width */
height: 100px; /* Any height */
background: blue;
}
Результат будет таким. Запустите фрагмент кода:
.container {
position: relative;
width: 200px;
height: 200px;
background: red;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background: blue;
}<div class="container">
<div class="center"></div>
</div>Я нашел это очень полезным.
Если вам нужно также центрировать по горизонтали и вертикали:
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
В поисках решения я получил предыдущие ответы и смог сделать контент по центру Ответ Матиаса Вейлера, но с использованием text-align:
#content{
position: absolute;
left: 0;
right: 0;
text-align: center;
}
Он работал с Google Chrome и Firefox.
Я понимаю, что на этот вопрос уже есть несколько ответов, но я никогда не находил решения, которое работало бы почти во всех классах, которое также имеет смысл и элегантно, поэтому вот мой вариант после настройки кучи:
.container {
position: relative;
}
.container .cat-link {
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%,-50%,0);
z-index: 100;
text-transform: uppercase; /* Forces CSS to treat this as text, not a texture, so no more blurry bugs */
background-color: white;
}
.color-block {
height: 250px;
width: 100%;
background-color: green;
}<div class="container">
<a class="cat-link" href="">Category</a>
<div class="color-block"></div>
</div>Он говорит, что дайте мне top: 50% и left: 50%, затем преобразуйте (создайте пространство) по обеим осям X / Y до значения -50%, в некотором смысле создайте зеркальное пространство.
Таким образом, это создает равное пространство во всех четырех точках div, который всегда является прямоугольником (имеет четыре стороны).
Это будет:
translate(-50%,-50%);?
- person Mark Baijens; 03.08.2018
Это смесь других ответов, которые сработали для нас:
.el {
position: absolute;
top: 50%;
margin: auto;
transform: translate(-50%, -50%);
}
Это работает с любой случайной неизвестной шириной элемента с абсолютным позиционированием, который вы хотите иметь в центре элемента контейнера:
<div class="container">
<div class="box">
<img src="https://picsum.photos/200/300/?random" alt="">
</div>
</div>
.container {
position: relative;
width: 100%;
}
.box {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
Flexbox можно использовать для центрирования блока с абсолютным позиционированием.
display: flex;
align-items: center;
justify-content: center;
.relative {
width: 275px;
height: 200px;
background: royalblue;
color: white;
margin: auto;
position: relative;
}
.absolute-block {
position: absolute;
height: 36px;
background: orange;
padding: 0px 10px;
bottom: -5%;
border: 1px solid black;
}
.center-text {
display: flex;
justify-content: center;
align-items: center;
box-shadow: 1px 2px 10px 2px rgba(0, 0, 0, 0.3);
}<div class="relative center-text">
Relative Block
<div class="absolute-block center-text">Absolute Block</div>
</div>display: -webkit-flex;?
- person Dhaval Jardosh; 18.03.2020
absolute позиционированных элементов
- person APu; 20.04.2021
Насколько мне известно, при неизвестной ширине этого добиться невозможно.
Вы можете - если это работает в вашем сценарии - абсолютно позиционировать невидимый элемент со 100% шириной и высотой и центрировать элемент там, используя margin: auto и, возможно, vertical-align. В противном случае для этого вам понадобится JavaScript.
Я хотел бы добавить к ответ Бобинса:
<body>
<div style="position: absolute; left: 50%;">
<div style="position: relative; left: -50%; border: dotted red 1px;">
I am some centered shrink-to-fit content! <br />
tum te tum
</div>
</div>
</body>
Улучшено: /// Это делает горизонтальную полосу прокрутки не отображаемой с большими элементами в центрированном div.
<body>
<div style="width:100%; position: absolute; overflow:hidden;">
<div style="position:fixed; left: 50%;">
<div style="position: relative; left: -50%; border: dotted red 1px;">
I am some centered shrink-to-fit content! <br />
tum te tum
</div>
</div>
</div>
</body>
Вот полезный плагин jQuery для этого. Я нашел его здесь. Я не думаю, что это возможно только с помощью CSS.
/**
* @author: Suissa
* @name: Absolute Center
* @date: 2007-10-09
*/
jQuery.fn.center = function() {
return this.each(function(){
var el = $(this);
var h = el.height();
var w = el.width();
var w_box = $(window).width();
var h_box = $(window).height();
var w_total = (w_box - w)/2; //400
var h_total = (h_box - h)/2;
var css = {"position": 'absolute', "left": w_total + "px", "top":
h_total + "px"};
el.css(css)
});
};
Sass / Compass версии предыдущего адаптивного решения:
#content {
position: absolute;
left: 50%;
top: 50%;
@include vendor(transform, translate(-50%, -50%));
}
transform: translate(-50%, -50%) делает текст и весь другой контент размытым в OS X с помощью браузеров webkit. keithclark.co.uk/articles/gpu-text-rendering-in -webkit
- person Yasha; 15.12.2015
-webkit-font-smoothing: antialiased; Я почерпнул это из статьи, которую вы опубликовали, кстати!
- person Adam Spence; 22.12.2015
Это сработало для меня:
<div class="container><p>My text</p></div>
.container{
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
Мой предпочтительный метод центрирования:
position: absolute;
margin: auto;
width: x%
JSFiddle находится здесь.
HTML:
<div id='parent'>
<div id='child'></div>
</div>
CSS:
#parent {
display: table;
}
#child {
display: table-cell;
vertical-align: middle;
}
Я знаю, что уже дал ответ, и мой предыдущий ответ, а также другие данные, работают нормально. Но я использовал это в прошлом, и он лучше работает в определенных браузерах и в определенных ситуациях. Так что я подумал, что дам и этот ответ. Я не редактировал свой предыдущий ответ и не добавлял его, потому что я считаю, что это совершенно отдельный ответ, и два, которые я предоставил, не связаны.
Принятое решение этого вопроса в моем случае не сработало ...
Я делаю подпись для некоторых изображений и решил это с помощью этого:
top: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
figure {
position: relative;
width: 325px;
display: block
}
figcaption{
position: absolute;
background: #FFF;
width: 120px;
padding: 20px;
-webkit-box-shadow: 0 0 30px grey;
box-shadow: 0 0 30px grey;
border-radius: 3px;
display: block;
top: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
}<figure>
<img src="https://picsum.photos/325/600">
<figcaption>
But as much
</figcaption>
</figure>HTML
<div id='parent'>
<div id='centered-child'></div>
</div>
CSS
#parent {
position: relative;
}
#centered-child {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto auto;
}
Это решение работает, если элемент имеет width и height
.wrapper {
width: 300px;
height: 200px;
background-color: tomato;
position: relative;
}
.content {
width: 100px;
height: 100px;
background-color: deepskyblue;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}<div class="wrapper">
<div class="content"></div>
</div>Это уловка, которую я придумал, чтобы заставить DIV плавать точно в центре страницы. Это, конечно, действительно некрасиво, но работает во всех браузерах.
Точки и тире
<div style="border: 5 dashed red;position:fixed;top:0;bottom:0;left:0;right:0;padding:5">
<table style="position:fixed;" width="100%" height="100%">
<tr>
<td style="width:50%"></td>
<td style="text-align:center">
<div style="width:200;border: 5 dashed green;padding:10">
Perfectly Centered Content
</div>
</td>
<td style="width:50%"></td>
</tr>
</table>
</div>
Очиститель
Ух ты, эти пять лет просто пролетели незаметно, не так ли?
<div style="position:fixed;top:0px;bottom:0px;left:0px;right:0px;padding:5px">
<table style="position:fixed" width="100%" height="100%">
<tr>
<td style="width:50%"></td>
<td style="text-align:center">
<div style="padding:10px">
<img src="Happy.PM.png">
<h2>Stays in the Middle</h2>
</div>
</td>
<td style="width:50%"></td>
</tr>
</table>
</div>
HTML:
<div class="wrapper">
<div class="inner">
content
</div>
</div>
CSS:
.wrapper {
position: relative;
width: 200px;
height: 200px;
background: #ddd;
}
.inner {
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
margin: auto;
width: 100px;
height: 100px;
background: #ccc;
}
Этот и другие примеры можно найти здесь.
Простой подход, который помог мне центрировать блок неизвестной ширины по горизонтали:
<div id="wrapper">
<div id="block"></div>
</div>
#wrapper {
position: absolute;
width: 100%;
text-align: center;
}
#block {
display: inline-block;
}
Свойство text-align можно добавить в набор правил #block, чтобы выровнять его содержимое независимо от выравнивания блока.
Это работало в последних версиях Firefox, Chrome, Internet Explorer, Edge и Safari.
Ни одно из решений у меня не сработало, так как я не хотел менять стиль элемента контейнера / оболочки. Этот код работал у меня:
position: absolute;
left: 50%;
margin-left: -50px;
top: 50%;
margin-top: -50px;
Вы также можете создать блок промежуточного программного обеспечения div#centered по центру со свойствами absolute, left и right и без свойства width, а затем установить основное содержимое div в качестве его дочернего элемента с полем display:inline-block и центрировать его с помощью text-align:center, установленного для его родительского поля промежуточного программного обеспечения.
#container {
position: relative;
width: 300px;
height: 300px;
border: solid 1px blue;
color: #DDDDDD;
}
#centered {
position: absolute;
text-align: center;
margin: auto;
top: 20px;
left: 0;
right: 0;
border: dotted 1px red;
padding: 10px 0px;
}
#centered>div {
border: solid 1px red;
display: inline-block;
color: black;
}<div id="container">
hello world hello world
hello world hello world
hello world hello world
hello world hello world
hello world hello world
hello world hello world
hello world hello world
hello world hello world
<div id="centered">
<div>
hello world <br/>
I don't know my width<br/>
but I'm still absolute!
</div>
</div>
</div>Вы можете поместить изображение в div и добавить идентификатор div и сделать так, чтобы CSS для этого div имел text-align:center:
HTML:
<div id="intro_img">
<img src="???" alt="???">
</div>
CSS:
#intro_img {
text-align: center;
}
Старайтесь не использовать темную сторону CSS. Избегайте использования отрицательных значений полей. Я знаю, что иногда вы вынуждены делать ужасные вещи, например margin-left: -450px, но, вероятно, вы могли бы сделать что-то вроде right: 450px. Это просто мой способ работы.
margin-left на right не имеет никакого смысла, если цель состоит в том, чтобы центрировать элемент.
- person ProblemsOfSumit; 19.11.2014
Я использовал похожее решение:
#styleName {
position: absolute;
margin-left: -"X"px;
}
Где X - половина ширины div, который я хочу отобразить. У меня он отлично работает во всех браузерах.
position: fixed, но что, если высота наложения неизвестна, необходимо реализовать полосы прокрутки для наложения
- person PUG; 01.09.2012
var scrolled =$(window).scrollTop(); if(scrolled>0) { var offset = $('#containerOverlay').offset(); $('#containerOverlay').css('top',($(window).height() * 0.05) + scrolled); }
- person PUG; 01.09.2012
