How to center a “position: absolute” element

2018-12-31 05:40发布

站内问答 / HTML/CSS
2154 24 5

I'm having a problem centering an element that has the attribute position set to absolute. Does anyone know why the images are not centered?

body {
  text-align: center;
}

#slideshowWrapper {
  margin-top: 50px;
  text-align: center;
}

ul#slideshow {
  list-style: none;
  position: relative;
  margin: auto;
}

ul#slideshow li {
  position: absolute;
}

ul#slideshow li img {
  border: 1px solid #ccc;
  padding: 4px;
  height: 450px;
}
<body>
  <div id="slideshowWrapper">
    <ul id="slideshow">
      <li><img src="img/dummy1.JPG" alt="Dummy 1" /></li>
      <li><img src="img/piano_unlicened.JPG" alt="Dummy 2" /></li>
    </ul>
  </div>
</body>

24条回答
孤独总比滥情好
2楼-- · 2018-12-31 06:27

Without knowing the width/height of the positioned1 element, it is still possible to align it as follows:

EXAMPLE HERE

.child {
    position: absolute;
    top: 50%;  /* position the top  edge of the element at the middle of the parent */
    left: 50%; /* position the left edge of the element at the middle of the parent */

    transform: translate(-50%, -50%); /* This is a shorthand of
                                         translateX(-50%) and translateY(-50%) */
}

It's worth noting that CSS Transform is supported in IE9 and above. (Vendor prefixes omitted for brevity)

Explanation

Adding top/left of 50% moves the top/left margin edge of the element to the middle of the parent, and translate() function with the (negative) value of -50% moves the element by the half of its size. Hence the element will be positioned at the middle.

This is because a percentage value on top/left properties is relative to the height/width of the parent element (which is creating a containing block).

While a percentage value on translate() transform function is relative to width/height of the element itself (Actually it refers to the size of bounding box).

For unidirectional alignment, go with translateX(-50%) or translateY(-50%) instead.

1. An element with a position other than static. I.e. relative, absolute, fixed values.

查看更多
0人赞 添加讨论(0) 举报
闭嘴吧你
3楼-- · 2018-12-31 06:31

enter image description here

I'm not sure what you want to accomplish, but in this case just adding width: 100%; to your ul#slideshow li will do the trick.

Explanation

The img tags are inline-block elements. This means that they flow inline like text, but also have a width and height like block elements. In your css there are two text-align: center; rules applied to the <body> and to the #slideshowWrapper (which is redundant btw) this makes all inline and inline-block child elements to be centered in their closest block elements, in your code these are li tags. All block elements have width: 100% if they are the static flow (position: static;), which is default. The problem is that when you tell li tags to be position: absolute;, you take them out of normal static flow, and this causes them to shrink their size to just fit their inner content, in other words they kind of "lose" their width: 100% property.

查看更多
0人赞 添加讨论(0) 举报
忆尘夕之涩
4楼-- · 2018-12-31 06:33

A simple CSS trick, just add:

width: 100%;
text-align: center;

This works on both images and text.

查看更多
0人赞 添加讨论(0) 举报
笑指拈花
5楼-- · 2018-12-31 06:36

to center a a position:absolute attribute you need to set left:50% and margin-left: -50% of the width of the div.

<!-- for horizontal -->
<style>
div.center{
 width:200px;
 left:50%;
 margin-left:-100px;
 position:absolute;
}
</style>


<body>
 <div class='center'>
  should be centered horizontaly
 </div>
</body>

for vertical center absolute you need to do the same thing bud not with left just with top. ( NOTE: html and body must have min-height 100%; )

<!-- for vertical -->
<style>
 body,html{
  min-height:100%;
 }
 div.center{
  height:200px;
  top:50%;
  margin-top:-100px;
  position:absolute;
 }
</style>

<body>
 <div class='center'>
  should be centered verticaly
 </div>
</body>

and can be combined for both

   <!-- for both -->
 <style>
 body,html{
  min-height:100%;
 }
 div.center{
  width:200px;
  height:50px
  left:50%;
  top:50%;
  margin-left:-100px;
  margin-top:-25px;
  position:absolute;
 }
</style>


<body>
 <div class='center'>
  should be centered
 </div>
</body>
查看更多
0人赞 添加讨论(0) 举报
几人难应
6楼-- · 2018-12-31 06:36

Here is easy and best solution for center element with “position: absolute” 

 body,html{
  min-height:100%;
 }
 
 div.center{
 width:200px;
 left:50%;
 margin-left:-100px;/*this is 50% value for width of the element*/
 position:absolute;
 background:#ffffd;
 border:1px solid #999;
 height:100px;
 text-align:center
 }
 
 
<style>

</style>

<body>
 <div class='center'>
  should be centered verticaly
 </div>
</body>

查看更多
0人赞 添加讨论(0) 举报
泛滥B
7楼-- · 2018-12-31 06:36

Position absolute takes it out of the flow, and places it at 0x0 to the parent ( Last block element to have a position absolute or position relative ).

I'm not sure what exactly you what you are trying to accomplish, It might be best to set the li to a position:relative and that will center them. Given your current CSS

Check out http://jsfiddle.net/rtgibbons/ejRTU/ to play with it

查看更多
0人赞 添加讨论(0) 举报
上一页 1 2 3 4 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)