如何中心绝对定位元素在div？
我需要在窗口的中心放置一个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>
响应式解决scheme
一般来说， 如果您不需要支持IE8或更低版本，那么这是一个很好的响应式devise或者未知尺寸的解决scheme。
.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>
真的很好的post..只是想添加，如果有人想用单独的div标签，然后在这里出路：
以900px为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; }
演示： http : //jsbin.com/rexuk/2/
在Google Chrome，Firefox和IE8中testing
希望这可以帮助 ：）
这工作为垂直和水平
#myContent{ position: absolute; left: 0; right: 0; top:0; bottom:0; margin: auto; }
如果你想让父母的元素中心，设置父亲的相对位置
#parentElement{ position:relative }
编辑：
-
为垂直中心alignment设置高度您的元素。 感谢@Raul
-
如果要做父项的元素中心，则将父项的位置设置为相对
search解决scheme我得到了上面的答案，可以使内容与Matthias Weiler答案集中，但使用文本alignment。
#content{ position:absolute; left:0; right:0; text-align: center; }
使用Chrome和Firefox。
据我所知，这是不可能达到一个未知的宽度。
你可以 – 如果这在你的场景中工作 – 绝对定位一个100％宽度和高度的不可见元素，并使用margin：auto和vertical-align来使元素居中。 否则，你将需要使用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>
下面是一个有用的jQuery插件来做到这一点。 在这里find。 我不认为纯粹用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 在这里
上面的响应式解决scheme的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; }
我知道我已经提供了一个答案，而我以前的答案和其他答案一样，工作得很好。 但我过去曾经使用过这个function，在某些浏览器和某些情况下，它效果更好。 所以我认为id也给出了这个答案。 我没有“编辑”我以前的答案，并添加它，因为我觉得这是一个完全独立的答案，我提供的两个是不相关的。
HTML：
<div id='parent'> <div id='child'></div> </div>
CSS：
#parent { display: table; } #child { display: table-cell; vertical-align: middle; }
#container { position: relative; width: 100%; float:left } #container .item { width: 50%; position: absolute; margin: auto; left: 0; right: 0; }
这是一个技巧，我想出了一个DIV漂浮在一个页面的中心。 适用于IE和Chrome。 诀窍在于表格单元的垂直alignment，以及固定的定位。
<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>
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; }
这个和更多的例子在这里
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; }
你可以把图像放在一个div中，并添加一个div id，并让该div的CSS有一个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>
我使用了类似的解决scheme：
#styleName { position: absolute; margin-left: -"X"px; }
其中“X”是一个div的宽度的一半，我想要显示。 在所有浏览器中都能正常工作。
尽量不要使用CSS的黑暗面。 避免使用负值作为边距。 我知道有时候你会被迫做一些可怕的事情，比如margin-left: -450px ，但是可能你可以做一些像right: 450px 。 这只是我的工作方式。
