Мне нужно разместить элемент div (с position:absolute;) в центре моего окна. Но у меня возникают проблемы, потому что ширина неизвестна.
Я пробовал это. Но он должен быть отрегулирован по мере того, как ширина реагирует.
.center {
left: 50%;
bottom:5px;
}
Любые идеи?
<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>Это работает для меня:
#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>Вот хорошее решение для гибкого дизайна или неизвестных размеров вообще, если вам не нужно поддерживать 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>Действительно хороший пост.. Просто хотел добавить, если кто-то хочет сделать это с единственным тегом div, а затем выход:
Принимая width как 900px.
#styleName {
position: absolute;
left: 50%;
width: 900px;
margin-left: -450px;
}
В этом случае нужно заранее знать width.
Абсолютный центр
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;
}
Demo: http://jsbin.com/rexuk/2/
Протестировано в Google Chrome, Firefox и IE8
Надеюсь, что это поможет:)
эта работа для вертикальной и горизонтальной
#myContent{
position: absolute;
left: 0;
right: 0;
top:0;
bottom:0;
margin: auto;
}
и если вы хотите создать центр элемента родителя, установите положение родительского относительного
#parentElement{
position:relative
}
изменить:
для вертикального центрирования выровняйте высоту вашего элемента. благодаря @Raul
если вы хотите создать центр элемента parent, установите положение родителя относительно
Поиск решения Я получил ответы выше и мог сосредоточить контент с помощью Маттиас Вайлер отвечает, но используя text-align.
#content{
position:absolute;
left:0;
right:0;
text-align: center;
}
Работает с хром и 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>Работает на любой случайной неизвестной ширине элемента с абсолютным позиционированием, который вы хотите иметь в центре вашего элемента контейнера.
<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;
}
Если вам нужно центрировать по горизонтали и вертикали тоже:
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
Насколько я знаю, этого достичь невозможно для неизвестной ширины.
Вы можете - если это работает в вашем сценарии - абсолютно позиционировать невидимый элемент со 100% шириной и высотой и иметь элемент, центрированный там, используя margin: auto и, возможно, вертикальное выравнивание. В противном случае вам понадобится Javascript для этого.
Я хочу добавить к @bobince ответ:
<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>
Это смесь других ответов, которая работает для нас:
.el {
position: absolute;
top: 50%;
margin: auto;
transform: translate(-50%, -50%);
}
Это полезный плагин 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)
});
};
Мой предпочтительный метод центрирования:
position: absolute;
margin: auto;
width: x%
JSFiddle здесь
sass/compass версия реагирующего решения выше:
#content {
position: absolute;
left: 50%;
top: 50%;
@include vendor(transform, translate(-50%, -50%));
}
Это сработало для меня:
<div class="container><p>My text</p></div>
.container{
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
Flex можно использовать для центрирования абсолютного позиционного элемента div.
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>#container
{
position: relative;
width: 100%;
float:left
}
#container .item
{
width: 50%;
position: absolute;
margin: auto;
left: 0;
right: 0;
}
Я знаю, что я уже дал ответ, и мой предыдущий ответ, наряду с другими, был очень хорошим. Но я использовал это в прошлом, и он работает лучше в некоторых браузерах и в определенных ситуациях. Поэтому я думал, что идиот даст этот ответ. Я не "редактировал" свой предыдущий ответ и добавляю его, потому что считаю, что это полностью отдельный ответ, а два, которые я предоставил, не связаны.
HTML:
<div id='parent'>
<div id='child'></div>
</div>
CSS
#parent {
display: table;
}
#child {
display: table-cell;
vertical-align: middle;
}
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>Решение этого вопроса не работает для моего случая. Я делаю подпись для некоторых изображений, и я решил использовать это
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>Это трюк, который я понял для того, чтобы заставить 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>
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;
}
Этот и другие примеры здесь
.center {
position: absolute
left: 50%;
bottom: 5px;
}
.center:before {
content: '';
display: inline-block;
margin-left: -50%;
}
Вы можете поместить изображение в div и добавить id div и иметь CSS для этого div
имеют text-align:center
HTML:
<div id="intro_img">
<img src="???" alt="???">
</div>
CSS:
#intro_img {
text-align:center;
}
#content { margin:0 auto; display:table; float:none;}<body>
<div>
<div id="content">
I'm the content
</div>
</div>
</body>Простой подход, который работал для меня, чтобы горизонтально центрировать блок неизвестной ширины:
<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, IE, Edge и Safari.
Вы также можете создать промежуточное поле div#centered с центрированными absolute, left и right свойствами и без свойства width а затем установить основное содержимое div как его дочерний элемент с display:inline-block box и text-align:center его с помощью 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>