Question

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

我试过这个。但需要根据宽度的响应进行调整。

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

有什么想法吗？

Answer 1

这对我有用：

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

Answer 2

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

Answer 3

响应式解决方案

如果您不需要支持IE8及更低版本，那么对于响应式设计或未知维度，这是一个很好的解决方案。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Here is a JS Fiddle

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

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

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

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

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

Answer 4

非常好的帖子..只是想添加如果有人想用单个div标签然后在这里出路：

将width作为900px。

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

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

Answer 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和IE8中测试

希望这会有所帮助：）

Answer 6

这项工作适用于纵向和横向

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

如果你想要父元素的元素中心，设置父亲相对的位置

 #parentElement{
      position:relative
  }

编辑：

用于垂直居中对齐元素的高度。感谢@Raul
如果您想要父元素的元素中心，请将父元素的位置设置为相对

Answer 7

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

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

Answer 8

搜索解决方案我得到了上面的答案，可以使内容集中 Matthias Weiler回答但是使用text-align。

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

使用chrome和Firefox。

Answer 9

适用于要在容器元素中心放置的绝对定位元素的任意随机未知宽度。

<强> Demo

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

Answer 10

我理解这个问题已经有了一些答案，但是我从来没有找到一个适用于几乎所有类别的解决方案，这些解决方案也很有意义且优雅，所以这是我在调整一堆后的看法：

.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轴上工作。或两者兼而有之，如我的例子所示。
我无法想出不起作用的情况。

Answer 11

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

你可以 - 如果在你的场景中有效 - 绝对定位一个100％宽度和高度的不可见元素，并使用margin：auto和可能vertical-align使元素居中。否则，你需要Javascript才能做到这一点。

Answer 12

我想加入@ 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>

Answer 13

这是一个有用的jQuery插件。找到here。我认为纯粹用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)
    });
};

Answer 14

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

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

Answer 15

我首选的定心方法：

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

绝对块元素定位
margin auto
相同的左/右，上/下

JSFiddle here

Answer 16

上面的响应式解决方案的sass /指南针版本：

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

Answer 17

这对我有用：

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

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

Answer 18

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

Answer 19

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

Answer 20

我知道我已经提供了答案，而我之前的答案以及其他人给出的答案都很好。但我过去曾经使用过它，它在某些浏览器和某些情况下效果更好。所以我认为id也给出了这个答案。我没有＆＃34;编辑＆＃34;我之前的回答并添加它，因为我觉得这是一个完全独立的答案，而我提供的两个答案并不相关。

HTML：

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

CSS：

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

Answer 21

这个问题的解决方案不适用于我的情况。我正在为一些图像做标题我解决了这个问题

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>

Answer 22

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/

Answer 23

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

Answer 24

这是我想要让DIV完全浮动到页面中心的技巧。当然真的很难看，但在所有

中都有效

Dots and Dashhes

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

Answer 25

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

这个和更多示例here

Answer 26

一种简单的方法，可以让我水平居中一个未知宽度的块：

<div id="wrapper">
  <div id="block"></div>
</div>

#wrapper { position: absolute; width: 100%; text-align: center; }
#block { display: inline-block; }

可以在#block规则集中添加text-align属性，以独立于块的对齐方式对齐其内容。

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

Answer 27

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

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

Answer 28

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

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

Answer 29

您可以将图像放在div中并添加div id并为该div添加CSS 有一个text-align:center

HTML：

<div id="intro_img">

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

</div>

CSS：

#intro_img {
    text-align:center;
}

Answer 30

您还可以创建以NA，NaN和div#centered属性为中心且没有absolute属性为中心的中间件left框，然后设置主要内容{ {1}}作为带有right框的子项，并以width为其居中中间件父框设置为居中

div

display:inline-block

Answer 31

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

  position: absolute;
  top: 50%;
  margin: auto;
  transform: translate(-50%, -50%);

Answer 32

** 响应式解决方案 **

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

此解决方案效果很好

//setting Session values for testing
Session["searchFor"] = "Central";
var db = new Models.DB();

List<Models.Station> allStations = db.Station.ToList();
var searchForValue = (string) Session["searchFor"];
var station = allStations.FirstOrDefault(x => x.Name.ToLower() == searchForValue.ToLower());
if (station != null)
{
    Session["address"] = station.Address;
}

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

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

元素（ div ）也可以是任意大小（必须小于容器）

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

结果将如下所示。运行代码段

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

我发现它很有帮助

Answer 33

由于我不想更改container / wrapper元素的样式，因此没有一种解决方案对我有用。这段代码对我有用：

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

Answer 34

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

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

其中“X”是我想要显示的div宽度的一半。在所有浏览器中都适用于我。

Answer 35

尽量不要使用CSS的黑暗面。避免对边距使用负值。我知道有时候你被迫做了margin-left: -450px之类的糟糕事情，但是你可能会做right: 450px之类的事情。这只是我的工作方式。

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

35 个答案:

响应式解决方案