如何将div中的绝对定位元素居中？
Ish*_*Ish 1034 css center css-position absolute
我需要在窗口的中心放置一个div(with position:absolute;)元素.但我这样做有问题,因为宽度未知.
我试过这个.但需要根据宽度的响应进行调整.
.center {
left: 50%;
bottom:5px;
}
有任何想法吗？
Mat*_*ler 1756
这对我有用:
#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>- 必须设置要居中的div的宽度 - 不会自动工作,例如,带有文本的按钮. (57认同)
- 我只是想要了解负边距是非常有效的CSS,并且*不应该被视为"肮脏的黑客".W3C盒型号规范中提到了负边距.有些人似乎随意地认定它是黑客,因为他们a)对他们一无所知,或者b)正在使用它们来修复他们糟糕的CSS. (33认同)
- 对于跨浏览器支持:`width`应设置为特定值以使其工作.`auto`和`100%`不会使元素居中.`display:block;`是必须的.`position:absolute;`不是必须的.所有价值观都有效.父元素的`position`应该设置为`static`以外的东西.将"left"和"right"设置为"0"是不必要的.`margin-left:auto; margin-right:auto;`将完成工作. (13认同)
- 我更喜欢这种解决方案,因为它不会增加视口大小. (3认同)
- @Joshua这只会水平居中,而不是像其他答案那样垂直居中. (2认同)
- 我不得不使用`display:table;` (2认同)
- 如果宽度已知的话就可以了。然而，正如问题所述，宽度未知。因此，接受的解决方案是唯一对我有用的解决方案。 (2认同)
bob*_*nce 1293
<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超出页面的右边缘并导致水平滚动.我将"left"css属性替换为"right",到目前为止它更好用,因为越过屏幕的左边缘不会导致滚动 (72认同)
- 百分比高度相对于包含块,在本例中为"<html>".但是`<html>`元素没有指定`height`,因此它占据了文档中所有内容的高度,这没什么,因为唯一的内容是绝对定位的(从内容流中取出).将`height:100%`添加到`<html>`元素会对此产生影响. (3认同)
- 滚动问题的一种解决方案可以是“位置：固定”，但是如果叠加层的高度未知，则必须实现叠加层的滚动条 (2认同)
Pro*_*mit 706
响应性解决方案
这里是一个很好的解决方案为响应式设计或未知的尺寸一般,如果你不需要支持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供应商前缀.例如-webkit-transform: translate(-50%,-50%);
- 到目前为止,最好的答案是,如果包含div的框小于子框,则此方法有效. (47认同)
- 由于不再需要IE7支持,这应该是事实上的解决方案.这个解决方案比左边更好:0 /右边:0技术,因为这样可以使元素保持宽度,同时保留宽度并处理未知宽度的元素. (22认同)
- `transform:translate`似乎使`position:fixed`在儿童中无法使用.在这种情况下,接受的答案效果更好. (3认同)
- @ChadJohnson 当然可以。按照我的建议使用 `webkit-` 前缀试试。 (2认同)
- 啊，我错过了你关于 -webkit 的注释。惊人的。 (2认同)
pra*_*abu 48
非常好的帖子..只是想添加如果有人想用单个div标签然后在这里出路:
以width作为900px.
#styleName {
position: absolute;
left: 50%;
width: 900px;
margin-left: -450px;
}
在这种情况下,人们应该width事先知道.
- "因为宽度未知"`......这不回答问题 (23认同)
- 嗨@Michel实际上当你谷歌搜索与居中绝对div相关的东西时,这个链接就是第一个链接.这就是我添加此解决方案的原因,以防有人像我一样在寻找上述解决方案.. :) (15认同)
Utk*_*agi 38
<div style='position:absolute; left:50%; top:50%; transform: translate(-50%, -50%)'>
This text is centered.
</div>
这将使位置类型为静态或相对的 div 内的所有对象居中。
Mic*_*tto 35
响应式解决方案
假设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;
}
结果看起来像这样。运行代码片段：
<div class="container">
<div class="center"></div>
</div>
.container {
position: relative; /* Important */
width: 200px; /* Any width */
height: 200px; /* Any height */
background: red;
}
我发现它很有帮助。
- 天才。为什么其他人没有想出这个。 (2认同)
Ija*_*een 34
绝对中心
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和IE8中测试过
希望这可以帮助 :)
Moh*_*ahi 31
这项工作适用于纵向和横向
#myContent{
position: absolute;
left: 0;
right: 0;
top:0;
bottom:0;
margin: auto;
}
如果你想要父元素的元素中心,设置父亲的位置
#parentElement{
position:relative
}
编辑:
对于垂直中心,将高度设置为元素.感谢@Raul
如果您想要父元素的元素中心,请将父元素的位置设置为相对
- 我认为您需要为垂直添加高度才能工作。 (2认同)
cav*_*ila 19
寻找解决方案我得到了上面的答案,可以使内容集中在Matthias Weiler的答案,但使用text-align.
#content{
position:absolute;
left:0;
right:0;
text-align: center;
}
使用chrome和Firefox.
- 我认为你不需要"text-align:center" (5认同)
mic*_*czy 16
如果您也需要水平和垂直居中：
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
Gas*_*ass 16
可以通过使用将具有绝对位置的元素居中aspect-ratio:1calc()
在下面的示例中，我使用圆形，因为它更容易解释和理解，但相同的概念可以应用于任何形状，意味着aspect-ratio:1和width相等height。（关于纵横比）
:root{
--diameter: 80px;
}
div{
position:absolute;
top: calc(50% - var(--diameter)/2);
right:calc(50% - var(--diameter)/2);
aspect-ratio:1;
width:var(--diameter);
border-radius:100%;
background:blue;
}<div/>解释
- 这仅适用于已知大小的元素 (3认同)
Dha*_*osh 15
Flexbox可用于将绝对定位的 div 居中。
display: flex;
align-items: center;
justify-content: center;
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);
}Dan*_*oss 11
我知道这个问题已经有了一些答案,但我从来没有找到一个适用于几乎所有类别的解决方案,这些解决方案也很有意义并且很优雅,所以这是我在调整一堆后的看法:
.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的所有4个点上创建了相等的空间,它总是一个盒子(有4个边).
这将:
- 工作时无需知道父母的身高/宽度.
- 做好回应.
- 在X轴或Y轴上工作.或两者,如我的例子.
- 我无法想出它不起作用的情况.
low*_*sun 11
适用于您希望在容器元素中心具有的绝对定位元素的任意随机未知宽度.
<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;
}
据我所知,这对于未知宽度是不可能实现的.
您可以 - 如果在您的场景中有效 - 绝对定位具有100%宽度和高度的不可见元素,并使用margin:auto和可能vertical-align使元素居中.否则,你需要Javascript来做到这一点.
小智 7
我想补充一下@ 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%);
}
小智 7
只需用一个新的 div 包装您的内容并使用 display flex ，然后使用align-items: center; 并调整内容：中心；看一看...
<div class="firstPageContainer">
<div class="firstPageContainer__center"></div>
</div>
<div class="firstPageContainer">
<div class="firstPageContainer__center"></div>
</div>
这是一个有用的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)
});
};
- 这不是更好的方法.尽可能使用CSS总是更好.在每个轴上使用CSS以及响应页面都可以使DIV居中.不需要JavaScript! (8认同)
#content {
position: absolute;
left: 50%;
top: 50%;
@include vendor(transform, translate(-50%, -50%));
}
- `transform: translate(-50%, -50%)` 使用 webkit 浏览器使 OS X 上的文本和所有其他内容变得模糊。http://keithclark.co.uk/articles/gpu-text-rendering-in-webkit/ (4认同)
小智 5
这对我有用：
<div class="container><p>My text</p></div>
.container{
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
| 归档时间： |
|
| 查看次数： |
1082649 次 |
| 最近记录： |