How to center absolutely positioned element in div-第2页回答

I need to place a div (with position:absolute;) element in the center of my window. But I am having problems doing so, because the width is unknown.

I tried this. But it needs to be adjusted as the width is responsive.

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

Any ideas?

标签： css css-position center absolute

27条回答

不再属于我。

2楼-- · 2018-12-31 02:14

Try not to use the dark side of the CSS. Avoid using negative values for margins. I know that sometimes you are forced to do awful things like a margin-left: -450px, but probably you could do something like right: 450px. It's just my way to work.

0人赞添加讨论(0) 举报

回忆，回不去的记忆

3楼-- · 2018-12-31 02:18

this work for vertical and horizontal

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

and if you want make element center of parent, set position of parent relative

 #parentElement{
      position:relative
  }

edit:

for vertical center align set height to your element. thanks to @Raul
if you want make element center of parent, set position of parent to relative

0人赞添加讨论(0) 举报

孤独总比滥情好

4楼-- · 2018-12-31 02:18

My preferred centering method:

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

absolute block element positioning
margin auto
same left/right, top/bottom

JSFiddle here

0人赞添加讨论(0) 举报

人间绝色

5楼-- · 2018-12-31 02:18

This is a trick I figured out for getting a DIV to float exactly in the center of a page. Really ugly of course, but works in all

Dots and Dashes

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

Cleaner

Wow that five years just flew by, didn't it?

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

0人赞添加讨论(0) 举报

与风俱净

6楼-- · 2018-12-31 02:18

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

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

0人赞添加讨论(0) 举报

余生无你

7楼-- · 2018-12-31 02:19

I'd like to add on to @bobince's answer:

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

Improved: /// this makes the horizontal scrollbar not appear with large elements in the centered 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>

0人赞添加讨论(0) 举报

How to center absolutely positioned element in div

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间