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

1078

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

我试过了 但是，由于宽度是响应性的，因此需要对其进行调整。

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

有任何想法吗？

css  css-position  center  absolute 
— 伊什
source
4
您在绝对中心示例中有一个示例，可以在不同情况下进行概括。
— Mihai8 2013年
2
有更好的回答了这个问题stackoverflow.com/questions/17976995/...
— 安德鲁·斯威夫特

Answers:

1332 

<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>
展开摘要

— 博宾斯
source
76
太棒了 为我工作！我遇到的一个问题：我居中的图像很大，这导致外部div超出页面的右边缘，并导致水平滚动。我将“ left” css属性换成了“ right”，到目前为止，它的效果更好，因为越过屏幕的左边缘不会引起滚动
— BoomShaka 2011年
如果用户将页面向下滚动怎么办，则叠加层会显示在顶部，您认为使用jquery来解决滚动问题是个好主意吗
— PUG
1
一种解决滚动问题的方法是，position: fixed但是如果覆盖层的高度未知，则必须实施覆盖层的滚动条
— PUG 2012年
3
使用此技术时遇到一个小问题。因为外部div占据了屏幕的50％，所以当文本宽于50％的屏幕尺寸时，会发生一些偏移。我通过将外部div设置为“ width：100％”并删除了left属性来解决此问题。对于内部div，我只需将文本对齐方式设置为居中。这样就解决了问题。
— Nicky L.
3
在这种情况下，百分比高度是相对于包含块的高度<html>。但是<html>元素没有height指定，因此它占用文档中所有内容的高度，这没什么，因为唯一的内容是绝对定位的（从内容流中取出）。添加height: 100%到<html>元素对此有所不同。
— bobince 2014年
1800

这对我有用：

#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>
展开摘要

— 马蒂亚斯·韦勒（Matthias Weiler）
source
36
我只是想了解一下，负边距是完全有效的CSS，不应将其视为“脏乱”。W3C盒模型规格中提到了负边距。有些人似乎是随意地认为这是一种黑客行为，因为他们a）对他们一无所知，或b）使用他们来修复不良的CSS。
— 约瑟夫·拉文沃尔夫
58
必须设置要居中的div的宽度-例如，带有文字的按钮无法自动工作。
— Stefan 2013年
2
@Joshua这只会水平居中，不会像其他答案一样垂直居中。
— ygoe
3
我更喜欢这种解决方案，因为它不会增加视口的大小。
— iceydee
13
对于跨浏览器支持：width应将其设置为特定值才能正常工作。auto并且100%不会使元素居中。display: block;是必须的。position: absolute;不是必须的。所有值都将起作用。父元素的position应设置为以外的其他值static。设置left和right到0是不必要的。margin-left: auto; margin-right: auto;会做的工作。
— OnurYıldırım2014年
767

响应式解决方案

这里是一个很好的解决方案为响应式设计或未知的尺寸一般，如果你不需要支持IE8和降低。

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

显示代码段

这是一个JS小提琴

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

这样，您将拥有一个完美居中的元素，并且在子元素和父元素上都具有灵活的宽度。奖励：即使孩子比父母大，这也有效。

您也可以以此将它垂直居中（同样，父母和孩子的宽度和高度可以完全灵活（和/或未知））：

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

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

— 提交问题
source
26
不再需要IE7支持，这应该是事实上的解决方案。此解决方案比left：0 / right：0技术更好，因为它可以使元素全宽，同时保留宽度并适用于未知宽度的元素。
— 2014年
51
到目前为止，最好的答案是，如果div所在的框小于孩子的框，则此方法有效。
— 案例
2
@ChadJohnson当然可以。webkit-按照我的建议尝试使用前缀。
— ProblemsOfSumit
2
啊，我想念您关于-webkit的笔记。太棒了
— 乍得·约翰逊
3
transform: translate似乎使position: fixed儿童无法使用。在这种情况下，可接受的答案效果更好。
— dmvianna
49

真的很好

以width作为900px。

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

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

— 普拉提卡布
source
26
"because the width is unknown"...这没有回答问题
— Michel Ayres
15
您好@Michel实际上，当您在Google中搜索与将绝对div居中相关的内容时，此链接为第一个链接。这就是为什么我添加此解决方案的原因，以防万一像我这样的人正在寻找上述解决方案.. :)
— pratikabu 2013年
1
对于响应式设计不是很有用，但是它对我有用，直到我开始进行响应式设计。这是将绝对定位的已知宽度元素居中的有效答案。
— 肖恩·肯德尔2014年
35

绝对中心

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中测试

希望这可以帮助 ：）

— 伊亚斯·阿梅努德（Ijas Ameenudeen）
source
这不起作用，请检查以下代码笔codepen.io/anon/pen/YqWxjJ
— 标记
1
抱歉，我认为这行得通，但您需要添加固定的高度和宽度codepen.io/anon/pen/WwxEYQ
— Mark
31

这项工作垂直和水平 

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

如果要使元素以父级为中心，请设置父级相对位置

 #parentElement{
      position:relative
  }

编辑：

  • 对于垂直居中，将设置的高度与元素对齐。感谢@Raul

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

— 莫森·阿卜杜拉希（Mohsen Abdollahi）
source
2
我认为您需要增加垂直高度才能正常工作。
— 罗尔2014年
看起来像是此位置位于页面中心，而不是另一个元素的中心。
— 君特Zöchbauer
1
@GünterZöchbauer是的，如果要使元素成为父元素中心，请设置父亲戚的位置。
— Mohsen Abdollahi 2015年
20

搜索解决方案时，我在上面得到了答案，并且可以使内容以Matthias Weiler的答案为中心，但使用text-align。

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

使用chrome和Firefox。

— 卡维拉
source
5
我认为您不需要“ text-align：center”
— Tobias 2013年
这个固定我的问题在这里。谢谢！
— Volomike
我需要“ text-align：center”，这在@ProblemsOfSumit建议的解决方案无法工作的情况下起作用，因为它使我的文本换行了。
— Nat
14

** 响应式解决方案 **

假设div中的元素是另一个div ...

这个解决方案很好

<div class="container">
  <div class="center"></div>
</div>

该容器可以是任何大小（必须是相对位置）

.container {
position: relative;/*important*/
width: 200px;/*any width*/
height: 200px;/*any height*/
background: red;
}

element（div）也可以是任意大小（必须小于container）

.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>
展开摘要

我发现它很有帮助

— RealMJDev
source
1
天才。为什么其他人没有提出这个建议。
— mesqueeb
谢谢您，祝您
— 编程
13

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

.el {
   position: absolute;
   top: 50%;
   margin: auto;
   transform: translate(-50%, -50%);
}
— Crashalot
source
好修复，谢谢男人！
— Stanley Bateswar
12

我知道这个问题已经有了一些答案，但是我还没有找到一个可以在几乎所有类中都可行并且优雅的解决方案，因此，在调整一些内容之后，我来考虑一下：

.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>
展开摘要

这就是说给我a top: 50%和a left: 50%，然后在X / Y轴上将其转换（创建空间）为该-50%值，在某种意义上是“创建镜像空间”。

因此，这将在div的所有4个点上创建相等的空间，该点始终是一个方框（具有4个边）。

这将：

  1. 无需知道父母的身高/宽度即可工作。
  2. 响应迅速。
  3. 在X或Y轴上加工。或两者皆有，例如我的示例。
  4. 我无法提出无法解决的情况。
— 丹尼尔·莫斯
source
如果您发现无法解决此问题，请让我知道，以便我用您的输入来编辑问题。
— 丹尼尔·莫斯
转换/翻译将使野生动物园在一定程度上渲染文本模糊
— James Tan，
@DanielMoss有什么理由不使用translate(-50%,-50%);吗？
— Mark Ba​​ijens
12

可以在容器元素的中心想要在绝对定位元素的任意未知宽度上工作。

演示版

<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;
}
— 低技术
source
9

Flex可用于将绝对定位的div居中。

display:flex;
align-items:center;
justify-content:center;

显示代码段

— 达瓦尔·贾多什（Dhaval Jardosh）
source
在我的屏幕上-Firefox 68.x，它没有对齐，绝对块出现在相对块的底部
— Webwoman
你可以试试这个display: -webkit-flex;吗？
— Dhaval Jardosh
7

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

您可以-如果在您的情况下可行-绝对放置宽度和高度为100％的不可见元素，并使用margin：自动并可能垂直对齐在其中居中。否则，您将需要Javascript来做到这一点。

— 佩卡
source
+1为“保证金：自动”。我之前尝试过使用“ margin：0 auto”线将div水平居中-将“ 0”应用于垂直边距，将“ auto”应用于水平。我认为这是StackOverflow用于最上层div的功能，以便使页面两侧的2个白色粗边框变为白色。但是，CSS边距上的W3Schools页面指出了“此结果取决于浏览器”的自动值-我没有亲自在许多不同的浏览器上进行尝试，因此我无法对此发表评论（但是它显然在某些方法中
— 起到
1
如果IE8没问题，则宽度（和高度）可能未知。请参阅我的答案以获取详细信息。
— ProblemsSuSumit
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>
— 小瓶
source
6

这是一个有用的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)
    });
};
— 本·谢洛克
source
这是更好的方法，尤其是在响应式设计中。
— m4tm4t 2012年
如果jQuery的是在任何情况下使用的将是微不足道的
— 代号语
8
这不是更好的方法。尽可能使用CSS总是更好。使用CSS在每个轴上以及在响应页面上都可以使DIV居中。不需要JavaScript！
— ProblemsOfSumit
1
@yckart，在这种情况下，该工具是CSS。
— ProblemsOfSumit
5

响应式解决方案的sass / compass版本：

#content {
  position: absolute;
  left: 50%;
  top: 50%;
  @include vendor(transform, translate(-50%, -50%));
}
— 亚当·斯彭斯
source
4
transform: translate(-50%, -50%)使用Webkit浏览器在OS X上使文本和所有其他内容模糊。keithclark.co.uk/articles/gpu-text-rendering-in-webkit
— Yasha
只需使用您喜欢的抗锯齿类型，就像-webkit-font-smoothing: antialiased;我从您发布的文章中收集到的那样！
— 亚当·斯彭斯
4

我首选的居中方法：

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

JSFiddle 在这里

— vp_arth
source
4

这为我工作：

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

.container{
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
— 艾伦
source
5年后是@Matthias Weiler的答案。
— aloisdg移至codidact.com，2016年
3

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

HTML：

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

CSS：

#parent {
  display: table;
}
#child {
  display: table-cell;
  vertical-align: middle;
}
— 达斯汀·泊桑（Dustin Poissant）
source
3 
#container
{
  position: relative;
  width: 100%;
  float:left
}
#container .item
{
  width: 50%;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
}
— Burcu AKCAOGLU
source
2

如果元素具有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>
展开摘要

— 密苏里州
source
2

这个问题的解决方案不适用于我的情况。

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>
展开摘要

— Marcogomesr
source
1

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

这和更多的例子在这里

1

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

— B先生
source
1 
.center {
  position: absolute
  left: 50%;
  bottom: 5px;
}

.center:before {
    content: '';
    display: inline-block;
    margin-left: -50%;
}
— 安德烈·P
source
0

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

HTML：

<div id="intro_img">

    <img src="???" alt="???">

</div>

CSS：

#intro_img {
    text-align:center;
}
— 德沃文·冯斯特朗格
source
0 

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

— 阿米特·本德
source
0

一个对我有用的简单方法是将一个未知宽度的块水平居中：

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

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

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

— 特伦斯·班多安
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.