How to center a “position: absolute” element

后端未结

关注

 26  3310

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?

相关标签:

26条回答

独厮守ぢ

2020-11-21 05:52

You can try this way :

* { margin: 0px; padding: 0px; }
#body { height: 100vh; width: 100vw; position: relative; 
        text-align: center; 
        background-image: url('https://s-media-cache-ak0.pinimg.com/originals/96/2d/ff/962dff2247ad680c542622e20f44a645.jpg'); 
         background-size: cover; background-repeat: no-repeat; }
.text { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height:100px; 
        display: inline-block; margin: auto; z-index: 999999; }

<html>
<body>
	<div id="body" class="container-fluid">
	  <!--Background-->
	    <!--Text-->
		  <div class="text">
		    <p>Random</p>
		  </div>	  
	</div>
</body>
</html>

0 讨论(0)

暖寄归人

2020-11-21 05:53
This worked for me:
```
position: absolute;
left: 50%;
transform: translateX(-50%);
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
太阳男子

2020-11-21 05:55
Div vertically and horizontally aligned center
```
top: 0;
bottom: 0;
margin: auto;
position: absolute;
left: 0;
right: 0;
```
Note : Elements should have width and height to be set
0 讨论(0)
发布评论:

提交评论
- 加载中...
别跟我提以往

2020-11-21 05:55
Or you can now use flex box with postion absolute:
```
.parent {
    position: relative;
    display: flex;
    justify-content: center;
}

.child {
    position: absolute;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
庸人自扰

2020-11-21 05:57
Centering something absolutely positioned is rather convoluted in CSS.
```
ul#slideshow li {
    position: absolute;
    left:50%;
    margin-left:-20px;

}
```
Change margin-left to (negative) half the width of the element you are trying to center.
0 讨论(0)
发布评论:

提交评论
- 加载中...

渐次进展

2020-11-21 05:57

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)

1 2 3 4 5 下一页