关于CSS：如何在div中将绝对定位的元素居中？


How to center absolutely positioned element in div?

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

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

1
2
3
4
.center {
  left: 50%;
  bottom:5px;
}

有任何想法吗？

相关讨论

这对我有用：

1
2
3
4
5
6
7
8
#content {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 100px; /* Need a specific value to work */
}
1
2
3
4
5
6
7
<body>
 
   
      I'm the content
   
 
</body>

相关讨论

1
2
3
4
5
6
7
8
<body>
 
   
      I am some centered shrink-to-fit content! <br />
      tum te tum
   
 
</body>

相关讨论

响应式解决方案

如果您不需要支持IE8及更低版本，这通常是响应式设计或未知尺寸的好解决方案。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.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;
}
1
    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

这是一个JS小提琴

提示是，left: 50%是相对于父级的，而translate转换是相对于元素的宽/高的。

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

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

1
2
3
4
5
6
.centered-axis-xy {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

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

相关讨论

真不错的帖子。只是想添加，如果有人想用单个div标签来做，那么这里的出路是：

将width作为900px。

1
2
3
4
5
6
#styleName {
    position: absolute;
    left: 50%;
    width: 900px;
    margin-left: -450px;
}

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

相关讨论

绝对中心

HTML：

1
    <!-- content -->

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.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中测试

希望这可以帮助 ：)

相关讨论

这项工作垂直和水平

1
2
3
4
5
6
7
8
  #myContent{
        position: absolute;
        left: 0;
        right: 0;
        top:0;
        bottom:0;
        margin: auto;
   }

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

1
2
3
 #parentElement{
      position:relative
  }

编辑：

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

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

相关讨论

在寻找解决方案时，我在上面得到了答案，并且可以使内容居中
Matthias Weiler回答，但使用文本对齐。

1
2
3
4
5
6
#content{
  position:absolute;
  left:0;
  right:0;
  text-align: center;
}

使用chrome和Firefox。

相关讨论

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

演示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    <img src="https://picsum.photos/200/300/?random" alt="">
 


.container {
  position: relative;
  width: 100%;
}

.box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.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;
}
1
  Category

这就是说给我一个top: 50%和一个left: 50%，然后在X / Y轴上将其转换(创建空间)为-50%值，在某种意义上是"创建镜像空间"。

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

这将：

  • 无需知道父母的身高/宽度即可工作。
  • 响应迅速。
  • 在X或Y轴上加工。或两者皆有，例如我的示例。
  • 我无法提出无法解决的情况。
    • 相关讨论

    我想补充@bobince的答案：

    1
    2
    3
    4
    5
    6
    7
    8
    <body>
       
           
                I am some centered shrink-to-fit content! <br />
                tum te tum
           
       
    </body>

    改进：///这使得水平滚动条在居中的div中不带有大元素。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <body>
       
           
               
                    I am some centered shrink-to-fit content! <br />
                    tum te tum
               
           
       
    </body>

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

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

    相关讨论

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

    1
    2
    3
    4
    5
    6
    .el {
       position: absolute;
       top: 50%;
       margin: auto;
       transform: translate(-50%, -50%);
    }

    这是一个有用的jQuery插件来执行此操作。在这里找到。我认为单纯使用CSS不可能

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    /**
     * @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)
        });
    };
    相关讨论

    这为我工作：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <p>
    My text
    </p>

    .container{
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    }
    相关讨论

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

    1
    2
    3
    4
    5
    6
    #content {
      position: absolute;
      left: 50%;
      top: 50%;
      @include vendor(transform, translate(-50%, -50%));
    }
    相关讨论

    我首选的居中方法：

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

    JSFiddle在这里

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    #container
    {
      position: relative;
      width: 100%;
      float:left
    }
    #container .item
    {
      width: 50%;
      position: absolute;
      margin: auto;
      left: 0;
      right: 0;
    }

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

    HTML：

    1
     

    CSS：

    1
    2
    3
    4
    5
    6
    7
    #parent {
      display: table;
    }
    #child {
      display: table-cell;
      vertical-align: middle;
    }

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

    1
    2
    3
    display:flex;
    align-items:center;
    justify-content:center;

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    .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);
    }
    1
    2
      Relative Block
      Absolute Block

    相关讨论

    如果元素具有width和height，则此解决方案有效

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    .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;
    }
    1
     

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

    1
    2
    3
    4
    5
    6
    7
    8
    top: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;

    display: flex;
    align-items: center;

    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
    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;
    }
    1
    2
    3
    4
    5
    6
    7
    <figure>
      <img  src="https://picsum.photos/325/600">
      <figcaption>
                But as much
        </figcaption>
                   
    </figure>

    HTML

    1
     

    CSS

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    #parent {
      position: relative;
    }
    #centered-child {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto auto;
    }

    http://jsfiddle.net/f51rptfy/

    HTML：

    1
            content

    CSS：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    .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精确地浮动在页面的中央。当然非常丑陋，但可以使用

    点和短划线

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
        <table style="position:fixed;" width="100%" height="100%">
            <tr>
                <td style="width:50%"></td>
                <td style="text-align:center">
                   
                        Perfectly Centered Content
                   
                </td>
                <td style="width:50%"></td>
            </tr>
        </table>

    清洁器

    哇，五年过去了，不是吗？

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <table style="position:fixed" width="100%" height="100%">
        <tr>
            <td style="width:50%"></td>
            <td style="text-align:center">
               
                    <img src="Happy.PM.png">
                    Stays in the Middle
               
            </td>
            <td style="width:50%"></td>
        </tr>
    </table>

    相关讨论

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .center {
      position: absolute
      left: 50%;
      bottom: 5px;
    }

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

    1
    #content { margin:0 auto; display:table; float:none;}
    1
    2
    3
    4
    5
    6
    7
    <body>
     
       
          I'm the content
       
     
    </body>

    您可以将图片放在div中并添加div ID并获取该div的CSS
    有一个text-align:center

    HTML：

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

    CSS：

    1
    2
    3
    #intro_img {
        text-align:center;
    }

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

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

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

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

    相关讨论

    您还可以创建以absolute，left和right属性居中且没有width属性居中的中间件div#centered框，然后将主要内容div设置为带有display:inline-block框的子项并将其居中为其中间件父盒设置了text-align:center的对象

    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
    #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;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
      hello world hello world
      hello world hello world
      hello world hello world
      hello world hello world
      hello world hello world
      hello world hello world
      hello world hello world
      hello world hello world
     
     
       
          hello world <br/>
          I don't know my width<br/>
          but I'    m still absolute!

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

    相关讨论

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

    1
    2
    3
    4
    #styleName {
        position: absolute;
        margin-left: -"X"px;
    }

    其中" X"是我要显示的div宽度的一半。在所有浏览器中都对我有效。

    相关讨论