如何在div中居中绝对定位的元素？

我想在窗口的中心放置一个div（带有position:absolute;）元素。但我这样做有问题，因为宽度未知。

我尝试了以下CSS代码，但它需要调整，因为宽度是响应式的。

.center {left: 50%;bottom: 5px;}

我怎样才能做到这一点？

1705959 次浏览
小开

据我所知，对于未知的宽度，这是不可能实现的。

如果这在你的场景中有效，你可以绝对定位一个具有100%宽度和高度的不可见元素，并使用边界：自动和可能的垂直对齐将元素居中。否则，你需要JavaScript来做到这一点。

小开

这里有一个有用的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; //400var h_total = (h_box - h)/2;var css = {"position": 'absolute', "left": w_total + "px", "top":h_total + "px"};el.css(css)});};
小开
最佳答案 

<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>

小开

我只是想补充一下，如果有人想用一个div标签来做，那么这里是出路：

将width作为900px。

#styleName {position: absolute;left: 50%;width: 900px;margin-left: -450px;}

在这种情况下，应该事先知道width。

小开

我想添加到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>
小开

我使用了类似的解决方案：

#styleName {position: absolute;margin-left: -"X"px;}

其中“X”是我要显示的div宽度的一半。它在所有浏览器中都能正常工作。

小开

寻找解决方案，我得到了前面的答案，可以让内容以马蒂亚斯·韦勒的回答为中心，但使用text-align：

#content{position: absolute;left: 0;right: 0;text-align: center;}

它适用于GoogleChrome和Firefox。

小开

这是我想出的一个让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>
小开

尽量不要使用CSS的阴暗面。避免使用负值作为边距。我知道有时你被迫做一些可怕的事情，比如margin-left: -450px，但也许你可以做一些像right: 450px这样的事情。这只是我的工作方式。

小开

您可以将图像放置在div中并添加div ID，并使该div的CSS具有text-align:center：

超文本标记语言：

<div id="intro_img">
<img src="???" alt="???">
</div>

css：

#intro_img {text-align: center;}
小开

超文本标记语言：

<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 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/

它在GoogleChrome，Firefox和Internet Explorer 8中进行了测试。

小开

我最喜欢的定心方法：

position: absolute;margin: auto;width: x%
  • 绝对块元定位
  • 自动保证金
  • 相同的左/右，上/下

JSFiddle是这里。

小开

响应式解决方案

这是一个很好的解决方案响应式设计或未知尺寸一般情况下如果您不需要支持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>

这是一个JS小提琴

线索是，left: 50%是相对于父元素的，而translate转换是相对于元素的宽度/高度的。

这样，你就有了一个完全居中的元素，在子元素和父元素上都有灵活的宽度。奖励：即使子元素比父元素大，这也有效。

您也可以将其垂直居中（再次，父级和子级的宽度和高度可以完全灵活（和/或未知））：

.centered-axis-xy {position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}

请记住，您可能还需要transform供应商前缀。例如-webkit-transform: translate(-50%,-50%);

小开 
#container{position: relative;width: 100%;float: left}
#container .item{width: 50%;position: absolute;margin: auto;left: 0;right: 0;}
小开

超文本标记语言

<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;}

小开

这适用于垂直和水平：

#myContent{position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;}

如果你想让元素成为父元素的中心，设置父元素相对的位置：

#parentElement{position: relative}

  • 对于垂直中心对齐，请将高度设置为元素。多亏了劳尔。

  • 如果要使元素成为父元素的中心，请将父元素的位置设置为相对

小开

超文本标记语言：

<div id='parent'><div id='child'></div></div>

css：

#parent {display: table;}#child {display: table-cell;vertical-align: middle;}

我知道我已经提供了一个答案，而且我之前的答案以及其他给出的答案都能正常工作。但是我过去曾使用过这个，并且在某些浏览器和某些情况下它更好用。所以我想我也会给出这个答案。我没有编辑我之前的答案并添加它，因为我觉得这是一个完全独立的答案，我提供的两个不相关。

小开

萨斯/指南针以前的响应式解决方案版本：

#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;}
小开 

#content { margin:0 auto; display:table; float:none;}
<body><div><div id="content">I'm the content</div></div></body>

小开

我知道这个问题已经有了一些答案，但我从来没有找到一个解决方案，可以在几乎所有的课程中工作，也有意义和优雅，所以这是我在调整了一堆之后的看法：

.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的所有四个点上创建一个相等的空间，它始终是一个框（有四个边）。

这将：

  1. 无需知道父级的高度/宽度即可工作。
  2. 工作响应。
  3. 在X轴或Y轴上工作。或者两者兼而有之，就像我的例子一样。
  4. 我不能想出一个不起作用的情况。
小开

一个简单的方法，对我来说，水平居中一个未知宽度的块：

<div id="wrapper"><div id="block"></div></div>
#wrapper {position: absolute;width: 100%;text-align: center;}
#block {display: inline-block;}

文本对齐属性可以添加到#块规则集中，以独立于块的对齐来对齐其内容。

这适用于最新版本的Firefox，Chrome，Internet Explorer，Edge和Safari。

小开

这适用于您希望在容器元素中心具有的绝对定位元素的任何随机未知宽度：

演示

<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;}
小开

如果元素具有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>

小开 
.center {position: absoluteleft: 50%;bottom: 5px;}
.center:before {content: '';display: inline-block;margin-left: -50%;}
小开

Flexbox可用于将绝对定位的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>

小开

如果你也需要水平和垂直居中：

left: 50%;top: 50%;transform: translate(-50%, -50%);
小开

您还可以创建中间件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 worldhello world hello worldhello world hello worldhello world hello worldhello world hello worldhello world hello worldhello world hello worldhello 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>

小开

这是其他答案的混合，对我们有用：

.el {position: absolute;top: 50%;margin: auto;transform: translate(-50%, -50%);}
小开

响应式解决方案

假设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>

我发现它很有帮助。

小开

这些解决方案都不适合我，因为我不想更改容器/包装器元素的样式。这段代码对我有用：

position: absolute;left: 50%;margin-left: -50px;top: 50%;margin-top: -50px;
小开 

<div style='position:absolute; left:50%; top:50%; transform: translate(-50%, -50%)'>This text is centered.</div>

这将以位置类型静态或相对的div中的所有对象为中心。

小开

只需用一个新的div包装您的内容，并使用显示flx，然后使用line-的项目：中心；并证明内容：中心；看看…

<div class="firstPageContainer"><div class="firstPageContainer__center"></div></div>
.firstPageContainer{display: flex;width: 1000px;height: 1000px;justify-content: center;align-items: center;background-color: #FF8527;}
.firstPageContainer__center{position:absolute;width: 50px;height: 50px;background-color: #3A4147;}
小开

使用calc()可以中心位置绝对的元素

在下面的例子中，我使用了一个圆，因为它更容易解释和理解，但同样的概念可以应用于任何具有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/>

Explanation

enter image description here


提交答案