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

我需要在窗口中心放置一个div（带有position:absolute;）元素。但是我遇到了问题，因为宽度未知。
我尝试了这个。但是需要根据宽度进行调整。

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

我该怎么办？

您在绝对中心示例中有一个示例，可以在不同情况下进行概括。

在stackoverflow.com/questions/17976995/…有一个更好的答案，可以解决这个问题。

#1 楼

 <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”，到目前为止，它的效果更好，因为越过屏幕的左边缘不会引起滚动

–BoomShaka
11-10-26在10:28

如果用户将页面向下滚动怎么办，则顶部会显示Overylay，您认为使用jquery来解决滚动问题是个好主意吗？

– PUG
2012年9月1日下午5:45

滚动问题的一种解决方案是定位：固定，但是如果未知叠加层的高度，则必须实现叠加层的滚动条

– PUG
2012年9月1日下午5:49

使用此技术时遇到一个小问题。由于外部div占据了屏幕的50％，因此当文本宽于50％的屏幕尺寸时，会发生一些偏移。我通过将外部div设置为“ width：100％”并删除了left属性来解决此问题。对于内部div，我只需将文本对齐方式设置为居中。这样就解决了问题。

– Nicky L.
2014年1月22日在16:14

百分比高度是相对于包含块的高度，在本例中为。但是元素没有指定高度，因此它采用文档中所有内容的高度，这没什么，因为唯一的内容是绝对放置的（从内容流中取出）。向元素添加高度：100％对此有所不同。

– bobince
2014年2月25日在9:19

#2 楼

这对我有用：

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

我只是想了解一下，负边距是完全有效的CSS，不应将其视为“脏乱”。 W3C盒模型规格中提到了负边距。有些人似乎是随意地认为这是黑客，因为他们a）对他们一无所知，或b）使用他们来修复其不良CSS。

–约瑟夫·拉文沃尔夫
2012年8月16日的1:33

必须设置要居中的div的宽度-例如，带有文字的按钮无法自动工作。

– Stefan
13年1月27日在11:12

@Joshua这只会水平居中，不会像其他答案一样垂直居中。

– ygoe
2013年1月31日19:22

我更喜欢这种解决方案，因为它不会增加视口大小。

–iceydee
13年3月4日在11:39

对于跨浏览器支持：应该将width设置为特定值才能起作用。自动和100％不会使元素居中。显示：块；是必须的。位置：绝对；不是必须的。所有值都将起作用。父元素的位置应设置为非静态。不需要将左右设置为0。左边距：自动；右边距：自动；会做的工作。

– OnurYıldırım
14年6月27日在16:12

#3 楼

响应式解决方案
如果您不需要支持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%);

不再需要IE7支持，这应该是事实上的解决方案。此解决方案优于left：0 / right：0技术，因为它可以使元素全宽，同时保留宽度并适用于未知宽度的元素。

–aleemb
2014年11月21日在6:09

到目前为止，最好的答案是，如果div所在的框小于孩子的框，则此方法有效。

–案例
2014年11月23日下午13:14

@ChadJohnson当然可以。按照我的建议，使用webkit-前缀进行尝试。

–问题Sumit
2015年2月12日在9:59

啊，我想念您关于-webkit的笔记。太棒了

–乍得·约翰逊（Chad Johnson）
15年2月12日在19:20

转换：翻译似乎使位置：固定在儿童中无法使用。在这种情况下，可接受的答案效果更好。

– dmvianna
2015年4月1日在4:44

#4 楼

我只是想补充一下，如果有人想用一个div标签来做，那就是出路：
将width用作900px。

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

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

“因为宽度未知” ...这无法回答问题

–米歇尔·艾尔斯（Michel Ayres）
13-10-3在13:20

您好@Michel实际上，当您在Google中搜索与将绝对div居中相关的内容时，此链接将作为第一个链接。这就是为什么我添加此解决方案的原因，以防万一像我这样的人正在寻找上述解决方案.. :)

–pratikabu
13-10-23在13:08

对于响应式设计不是很有用，但是它对我有用，直到我开始进行响应式设计。这是将绝对定位的已知宽度元素居中的有效答案。

– Sean Kendle
2014年3月19日在20:30

#5 楼

绝对中心
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中进行了测试。

这不起作用，请检查以下代码笔codepen.io/anon/pen/YqWxjJ

–马克
16-3-11的3:20

抱歉，我认为这行得通，但是您需要包含固定的高度和宽度codepen.io/anon/pen/WwxEYQ

–马克
16-3-11在3:36

#6 楼

这适用于垂直和水平：

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

如果要使元素位于父级的中心，请设置父级相对位置：

#parentElement{
    position: relative
}

要进行垂直居中对齐，请设置元素的高度。多亏了Raul。

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

我认为您需要增加垂直高度才能正常工作。

–劳尔
2014年12月27日19:18

看起来是这样放置在页面中心，而不是另一个元素的中心。

–GünterZöchbauer
2015年11月18日在17:31

@GünterZöchbauer是的，如果要使元素成为父元素中心，请设置父亲戚的位置。

– Mohsen Abdollahi
2015年11月19日下午6:53

#7 楼

如果您还需要水平和垂直居中：

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

#8 楼

在寻找解决方案时，我得到了之前的答案，并且可以使内容以Matthias Weiler的答案为中心，但是使用text-align：

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

它可与Google Chrome和Firefox一起使用。

我认为您不需要“ text-align：center”

– Tobias
2013年8月6日9:00

这解决了我的问题。谢谢！

– Volomike
2016年9月7日下午0:54

我需要“ text-align：center”，这在@ProblemsOfSumit建议的解决方案无法工作的情况下起作用，因为它使我的文本换行了。

–纳特
18/12/13在12:56

#9 楼

响应式解决方案
假设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>

我发现它很有帮助。

天才。为什么其他人不提出这个建议。

–mesqueeb
5月18日9:53

谢谢，编码愉快

– RealMJDev
5月19日12:21

#10 楼

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

这将使div内所有对象的居中与位置类型为静态或相对。

对我来说，这是执行此操作的最佳方法。也是最常用的方法

– Utkarsh Tyagi
6月20日9:59

回复“ 059％”：您是说“ 50％”吗？如果是这样，请通过编辑您的答案来回应，而不是在评论中。

– Peter Mortensen
6月20日10:31

我的情况略有不同，对于您要转换的提示，我感到非常高兴：translate（）！

–BergListe
11月16日11:19

#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的所有四个点上创建相等的空间，该点始终是一个框（具有四个面）。
这将：

工作而无需知道父母的身高/宽度。
响应式工作。
在X或Y轴上工作。或同时出现这两种情况，例如我的示例。
我无法提出无法正常工作的情况。

如果您发现无法解决的问题，请告诉我，以便我用您的输入来编辑问题。

–丹尼尔·莫斯（Daniel Moss）
17年11月26日在18:28

转换/翻译将使野生动物园以一定比例渲染文本

–詹姆士·谭（James Tan）
18年1月9日在9:02

@DanielMoss是否有任何理由不使用translate（-50％，-50％）;？

– Mark Baijens
18年8月3日，9：40

#12 楼

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

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

#13 楼

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

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

#14 楼

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>

在我的屏幕上-Firefox 68.x，它没有对齐，绝对块出现在相对块的底部

– Webwoman
3月17日21:45

您可以尝试以下显示：-webkit-flex;吗？

–达瓦尔·贾多什（Dhaval Jardosh）
3月17日23:27

#15 楼

据我所知，对于未知的宽度这是不可能实现的。
-如果在您的情况下可行，您可以-绝对定位宽度和高度为100％的不可见元素，并使用边距：自动对齐，也可能垂直对齐。否则，您将需要JavaScript来实现。

+1为“保证金：自动”。我之前尝试过使用“ margin：0 auto”线将div水平居中-将“ 0”应用于垂直边距，将“ auto”应用于水平。我认为这就是StackOverflow用于最高级div的目的，以使页面两侧的2个白色粗边框变为白色。但是，CSS边距上的W3Schools页面指出了“此结果取决于浏览器”的自动值-我没有亲自在许多不同的浏览器上进行尝试，因此我无法对此发表评论（但是它显然在其中一些中起到了作用）

– Steg
09年11月21日在22:23

如果IE8不是问题，则宽度（和高度）未知是可能的。有关详细信息，请参见我的答案。

–问题Sumit
2014年9月8日16:35

#16 楼

我想补充一下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>

#17 楼

这是一个有用的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)
    });
};

这是更好的方法，尤其是在响应式设计中。

–m4tm4t
2012年10月18日上午10:58

如果在任何情况下都使用jQuery，那将是微不足道的

–耳语者
2014年1月13日15:27

这不是更好的方法。尽可能使用CSS总是更好。使用CSS在每个轴上以及在响应页面上都可以使DIV居中。不需要JavaScript！

–问题Sumit
2014年4月30日在9:25

@yckart，在这种情况下，该工具是CSS。

–问题Sumit
15年4月28日在7:21

#18 楼

以前的响应式解决方案的Sass / Compass版本：

#content {
  position: absolute;
  left: 50%;
  top: 50%;
  @include vendor(transform, translate(-50%, -50%));
}

转换：transform（-50％，-50％）使用Webkit浏览器在OS X上使文本和所有其他内容模糊。 keithclark.co.uk/articles/gpu-text-rendering-in-webkit

– Yasha
2015年12月15日20:21在

只需使用您喜欢的抗锯齿类型-webkit-font-smoothing：antialiased;我从您发布的文章中收集到了这一点！

–亚当·斯彭斯（Adam Spence）
2015年12月22日在7:22

#19 楼

这对我有用：

<div class="container><p>My text</p></div>

.container{
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

5年后是@Matthias Weiler的答案。

– aloisdg移至codidact.com
16-11-19在9:43

#20 楼

我首选的居中方法：

position: absolute;
margin: auto;
width: x%

左/右，上/下相同

JSFiddle在这里。

#21 楼

#container
{
  position: relative;
  width: 100%;
  float: left
}

#container .item
{
  width: 50%;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
}

#22 楼

HTML：

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

CSS：

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

我知道我已经提供了答案，我以前的答案以及给出的其他答案也很好用。但是我过去曾经使用过它，它在某些浏览器和某些情况下效果更好。所以我想我也会给出这个答案。我没有“编辑”以前的答案并添加它，因为我认为这是一个完全独立的答案，而我提供的两个答案无关。

#23 楼

这个问题的公认解决方案不适用于我的情况...
我正在为某些图像添加标题，并使用以下方法解决了该问题：

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>

#24 楼

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

http://jsfiddle.net/f51rptfy/

#25 楼

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

#26 楼

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

.center:before {
    content: '';
    display: inline-block;
    margin-left: -50%;
}

#27 楼

我想出了一个技巧，可以使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>

#28 楼

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

这里有更多示例。

#29 楼

 #content { margin:0 auto; display:table; float:none;}

 <body>
  <div>
    <div id="content">
      I'm the content
    </div>
  </div>
</body>

#30 楼

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

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

编程黑洞网

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

评论

#1 楼

评论

#2 楼

评论

#3 楼

评论

#4 楼

评论

#5 楼

评论

#6 楼

评论

#7 楼

#8 楼

评论

#9 楼

评论

#10 楼

评论

#11 楼

评论

#12 楼

#13 楼

#14 楼

评论

#15 楼

评论

#16 楼

#17 楼

评论

#18 楼

评论

#19 楼

评论

#20 楼

#21 楼

#22 楼

#23 楼

#24 楼

#25 楼

#26 楼

#27 楼

#28 楼

#29 楼

#30 楼