ChatGPT解决这个技术问题 Extra ChatGPT

How can I center an absolutely positioned element in a div?

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

How can I do it?

You have an example in Absolute center examples that can be generalized in different situations.
There is a better answer to this question at stackoverflow.com/questions/17976995/…
I think some of us oldies need to look at flex

M
Mike

This works for me:

#content { position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; width: 100px; /* Need a specific value to work */ }

I'm the content


I just want to get across that negative margins are perfectly valid CSS and should not be viewed as a "dirty hack". Negative margins are mentioned in the W3C box model specification. Some individuals seem to arbitrarily decide it is a hack because they a) are ignorant to them, or b) are using them to fix their bad CSS.
the width of the div to be centered has to be set - won't work automagically with, say, a button with text on it.
@Joshua This will only center horizontally, not vertically like the other answer.
I prefer this solution as it doesn't increase the viewport size.
For cross-browser support: width should be set to a specific value for this to work. auto and 100% will not center the element. display: block; is a must. position: absolute; is NOT a must. All values will work. Parent element's position should be set to something other than static. Setting left and right to 0 is unnecessary. margin-left: auto; margin-right: auto; will do the work.
L
Lionel Paulus

I am some centered shrink-to-fit content!
tum te tum


Awesome. Worked for me! One problem I had: The image I was centering was quite big, this caused the outer div to go beyond the right edge of the page and cause horizontal scrolling. I swapped out the "left" css property for "right", and so far it works better since going over the left edge of the screen doesnt cause scrolling
what if user has scrolled the page down, overylay appears on the top, do you think it will be a good idea to use jquery to fix scroll issue
one solution for scroll issue can be position: fixed but what if height is unknown of overlay, scroll bars for overlay will have to be implemented
Solution for scrolling can be this, did not test it enough though, wht do you guys think of this solution? var scrolled =$(window).scrollTop(); if(scrolled>0) { var offset = $('#containerOverlay').offset(); $('#containerOverlay').css('top',($(window).height() * 0.05) + scrolled); }
C
Community

Responsive Solution

Here is a good solution for responsive design or unknown dimensions in general if you don't need to support IE8 and lower.

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

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

I'm always centered
doesn't matter how much text, height or width i have.
The dimensions or my parent are irrelevant as well

Here is a JS Fiddle

The clue is, that left: 50% is relative to the parent while the translate transform is relative to the elements width/height.

This way you have a perfectly centered element, with a flexible width on both child and parent. Bonus: this works even if the child is bigger than the parent.

You can also center it vertically with this (and again, width and height of parent and child can be totally flexible (and/or unknown)):

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

Keep in mind that you might need transform vendor prefixed as well. For example -webkit-transform: translate(-50%,-50%);


With IE7 support no longer necessary, this should be the de facto solution. This solution is better than the left:0/right:0 technique since that makes the elements full width while this retains the width and works on elements of unknown widths.
By far the best answer, this works if the box the div is contained in is smaller than the child.
@ChadJohnson of course it does. Try it with the webkit- prefix as I suggested.
Ah, I missed your note about -webkit. Awesome.
transform: translate seems to make position: fixed unusable in children. The accepted answer works better in this case.
R
Rifky Niyas

This text is centered.

This will center all the objects inside div with position type static or relative.


According to me this is the best way of doing this..also the most commonly used
Re "059%": Do you mean "50%"? If so, please respond by editing your answer, not here in comments.
I have a slightly different case and I'm very glad about your hint to transform: translate()!
We should limit the usage of transform because this is conflicting with animations.
thanks, it works
P
Peter Mortensen

I just wanted to add if someone wants to do it with a single div tag then here is the way out:

Taking width as 900px.

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

In this case one should know the width beforehand.


"because the width is unknown" ... this doesn't answer the question
hi @Michel actually when you google search for something related to centering the absolute div, this link comes as the first link. That's why I added this solution, in case someone like me is in search for the above solution.. :)
Not very useful for responsive design, but it worked for me until I started doing responsive designs. This is a valid answer for centering absolutely positioned known width elements.
P
Peter Mortensen

Responsive solution

Assuming the element in the div, is another div...

This solution works fine:

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

The container can be any size (must be position relative):

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

The element (div) can also be any size (must be smaller than the container):

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

The result will look like this. Run the code snippet:

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

I found it very helpful.


P
Peter Mortensen

Absolute Centre

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

Demo: http://jsbin.com/rexuk/2/

It was tested in Google Chrome, Firefox, and Internet Explorer 8.


This doesn't work, please check the following codepen codepen.io/anon/pen/YqWxjJ
Sorry I think this will work but you need to include a fixed height and width codepen.io/anon/pen/WwxEYQ
I don't understand why setting left and right to 0 means in this context when it's used with margin auto. Care to explain?
P
Peter Mortensen

This works for vertical and horizontal:

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

And if you want make an element center of the parent, set the position of the parent relative:

#parentElement{
    position: relative
}

For vertical center align, set the height to your element. Thanks to Raul.

If you want make an element center of the parent, set the position of the parent to relative


I think you need to add height for vertical to work.
Looks like this positions in the center of the page, not the center of another element.
@GünterZöchbauer yes, if you want make element center of parent, set position of parent relative.
The best answer! It works better, than transform: translate.
m
michal.jakubeczy

If you need to center horizontally and vertically too:

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

P
Peter Mortensen

Searching for a solution, I got the previous answers and could make content centered with Matthias Weiler's answer, but using text-align:

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

It worked with Google Chrome and Firefox.


I think you don't need the "text-align: center"
This fixed my problem here. Thanks!
I needed the "text-align: center", and this worked where the solution suggested by @ProblemsOfSumit didn't work as it made my text wrap.
P
Peter Mortensen

I understand this question already has a few answers, but I've never found a solution that would work in almost all classes that also makes sense and is elegant, so here's my take after tweaking a bunch:

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

It is saying give me a top: 50% and a left: 50%, then transform (create space) on both the X/Y axis to the -50% value, in a sense "create a mirror space".

As such, this creates an equal space on all the four points of a div, which is always a box (has four sides).

This will:

Work without having to know the parent's height / width. Work on responsive. Work on either X or Y axis. Or both, as in my example. I can't come up with a situation where it doesn't work.


Please do let me know if you find a situation where this doesn't work so I could edit the question with your input.
transform / translate will causes safari to render text blurred on certain scale
@DanielMoss any reason to not use translate(-50%,-50%);?
P
Peter Mortensen

Flexbox can be used to center an absolute positioned 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); }

Relative Block
Absolute Block


on my screen -Firefox 68.x, it just doesn't align, the absolute block appears at the bottom of the relative block
Can you try this display: -webkit-flex;?
It'll not work for absolute positioned items
P
Peter Mortensen

This works on any random unknown width of the absolute positioned element you want to have in the centre of your container element:

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

S
Simon

This is a mix of other answers, which worked for us:

.el {
   position: absolute;
   top: 50%;
   margin: auto;
   transform: translate(-50%, -50%);
}

P
Peter Mortensen

As far as I know, this is impossible to achieve for an unknown width.

You could - if that works in your scenario - absolutely position an invisible element with 100% width and height, and have the element centered in there using margin: auto and possibly vertical-align. Otherwise, you'll need JavaScript to do that.


+1 for the "margin: auto" thing. I've tried this before to horizontally centre a div using the line "margin: 0 auto" - the "0" applying to the vertical margins and the "auto" the horizontal. I think this is what StackOverflow uses for the very top level div to get the 2 thick white borders down the sides of the page. However, the W3Schools page on CSS margin states for the auto value that "The result of this is dependant of the browser" - I've not personally tried it across many different browsers, so I can't really comment on this point (but it obviously does the trick in some of them)
it is possible for an unknown width (and height) if IE8 isn't an issue. See my answer for details.
P
Peter Mortensen

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>

P
Peter Mortensen

Here's a useful jQuery plugin to do this. I found it here. I don't think it's possible purely with 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)
    });
};

this is the better way, and especially with repsonsive design.
Would be trivial if jQuery was used in any case
this is NOT the better way. It's always better to use CSS whenever possible. Centering a DIV is possible with CSS in every axis and also for responsive pages. There is no need for JavaScript!
@yckart and in this case the tool is CSS.
P
Peter Mortensen

Sass/Compass version of a previous responsive solution:

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

transform: translate(-50%, -50%) makes text and all other content blurry on OS X using webkit browsers. keithclark.co.uk/articles/gpu-text-rendering-in-webkit
Just use the type of antialiasing that you like -webkit-font-smoothing: antialiased; I've gleaned that from the article you posted btw!
P
Peter Mortensen

This worked for me:

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

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

It's @Matthias Weiler answer 5 years later.
E
Emma

Just wrap your content with a new div and use display flex and then use align-items: center; and justify-content: center; take a look...

<div class="firstPageContainer">
  <div class="firstPageContainer__center"></div>
</div>
.firstPageContainer{
  display: flex;
  width: 1000px;
  height: 1000px;
  justify-content: center;
  align-items: center;
  background-color: #FF8527;
}

.firstPageContainer__center{
  position:absolute;
  width: 50px;
  height: 50px;
  background-color: #3A4147;
}

P
Peter Mortensen

My preferred centering method:

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

absolute block element positioning

margin auto

same left/right, top/bottom

A JSFiddle is here.


P
Peter Mortensen
#container
{
  position: relative;
  width: 100%;
  float: left
}

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

P
Peter Mortensen

HTML:

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

CSS:

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

I know I already provided an answer, and my previous answer, along with others given, work just fine. But I have used this in the past and it works better on certain browsers and in certain situations. So I thought I'd give this answer as well. I did not "Edit" my previous answer and add it because I feel this is an entirely separate answer and the two I have provided are not related.


P
Peter Mortensen

The accepted solution of this question didn't work for my case...

I'm doing a caption for some images and I solved it using this:

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

But as much


D
Dustin Poissant

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/


M
Mo.

This solution works if the element has width and 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; }


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

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

P
Peter Mortensen

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

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, those five years just flew by, didn't they?

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

P
Peter Mortensen

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

This and more examples here.


P
Peter Mortensen

A simple approach that worked for me to horizontally center a block of unknown width:

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

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

#block {
    display: inline-block;
}

A text-align property may be added to the #block ruleset to align its content independently of the alignment of the block.

This worked on recent versions of Firefox, Chrome, Internet Explorer, Edge and Safari.