Center an element with absolute position and undefined width in CSS

Question

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

User · Answer

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:

_x000D_

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

_x000D_

<div class="container">
  <a class="cat-link" href="">Category</a>
  <div class="color-block"></div>
</div>

_x000D_

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.

User · Answer

You can place the image in a div and add a div id and have the CSS for that div have a text-align center  HTML   lt div id  quot intro img quot  gt        lt img src  quot     quot  alt  quot     quot  gt    lt  div gt    CSS   intro img       text-align  center

User · Answer

I have used a similar solution   styleName       position  absolute      margin-left  - quot X quot px     Where  quot X quot  is half of the width of a div I want to display  It works fine for me in all browsers

User · Answer

HTML   lt div id  parent  gt     lt div id  centered-child  gt  lt  div gt   lt  div gt    CSS   parent     position  relative     centered-child     position  absolute    left  0    right  0    top  0    bottom  0    margin  auto auto      http   jsfiddle net f51rptfy

User · Answer

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    x000D   x000D  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    x000D   lt figure gt       lt img  src  https   picsum photos 325 600  gt       lt figcaption gt          But as much      lt  figcaption gt   lt  figure gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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

User · Answer

Responsive solution Assuming the element in the div  is another div    This solution works fine   lt div class  quot container quot  gt     lt div class  quot center quot  gt  lt  div gt   lt  div gt   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   x000D   x000D   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    x000D   lt div class  container  gt       lt div class  center  gt  lt  div gt   lt  div gt  x000D   x000D   x000D   I found it very helpful

User · Answer

This is a mix of other answers  which worked for us    el      position  absolute     top  50      margin  auto     transform  translate -50   -50

User · Answer

Absolute Centre HTML   lt div class  quot parent quot  gt     lt div class  quot child quot  gt       lt  -- content -- gt     lt  div gt   lt  div gt   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

User · Answer

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

User · Answer

x000D   x000D   lt body gt  x000D     lt div style  position  absolute  left  50    gt  x000D       lt div style  position  relative  left  -50   border  dotted red 1px   gt  x000D        I am some centered shrink-to-fit content   lt br   gt  x000D        tum te tum x000D       lt  div gt  x000D     lt  div gt  x000D   lt  body gt  x000D   x000D   x000D

User · Answer

HTML   lt div class  quot wrapper quot  gt       lt div class  quot inner quot  gt          content      lt  div gt   lt  div gt   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

User · Answer

None of the solutions worked for me since I didn t want to change the styling of the container wrapper element  This code worked for me   position  absolute  left  50   margin-left  -50px  top  50   margin-top  -50px

User · Answer

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       x000D   x000D   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    x000D   lt div class  outer  gt       lt div class  inner  gt I m always centered lt br  gt doesn t matter how much text  height or width i have  lt br  gt The dimensions or my parent are irrelevant as well lt  div gt   lt  div gt  x000D   x000D   x000D   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

User · Answer

This works for me    x000D   x000D   content   x000D    position  absolute   x000D    left  0   x000D    right  0   x000D    margin-left  auto   x000D    margin-right  auto   x000D    width  100px     Need a specific value to work    x000D    x000D   lt body gt  x000D     lt div gt  x000D       lt div id  content  gt  x000D        I m the content x000D       lt  div gt  x000D     lt  div gt  x000D   lt  body gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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

User · Answer

If you need to center horizontally and vertically too   left  50   top  50   transform  translate -50   -50

User · Answer

container     position  relative    width  100     float  left     container  item     width  50     position  absolute    margin  auto    left  0    right  0

User · Answer

This worked for me   lt div class  quot container gt  lt p gt My text lt  p gt  lt  div gt    container      position  absolute      left  0      right  0      margin-left  auto      margin-right  auto

User · Answer

HTML   lt div id  parent  gt     lt div id  child  gt  lt  div gt   lt  div gt   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  quot Edit quot  my previous answer and add it because I feel this is an entirely separate answer and the two I have provided are not related

User · Answer

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     quot position quot    absolute    quot left quot   w total    quot px quot    quot top quot   h total    quot px quot                el css css

User · Answer

Flexbox can be used to center an absolute positioned div  display  flex  align-items  center  justify-content  center    x000D   x000D   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     x000D   lt div class  relative center-text  gt    Relative Block    lt div class  absolute-block center-text  gt Absolute Block lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

You can also create the middleware div centered box centered with absolute  left and right properties and without width property and then set the main content div as its child with display inline-block box and center it with text-align center set for its middleware parent box  x000D   x000D   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 gt div     border  solid 1px red    display  inline-block    color  black    x000D   lt div id  container  gt    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     lt div id  centered  gt       lt div gt        hello world  lt br  gt        I don t know my width lt br  gt        but I m still absolute       lt  div gt     lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

center     position  absolute   left  50     bottom  5px      center before       content          display  inline-block      margin-left  -50

User · Answer

A simple approach that worked for me to horizontally center a block of unknown width   lt div id  quot wrapper quot  gt     lt div id  quot block quot  gt  lt  div gt   lt  div gt     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

User · Answer

Sass Compass version of a previous responsive solution   content     position  absolute    left  50     top  50      include vendor transform  translate -50   -50

User · Answer

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  lt div style  quot border  5 dashed red position fixed top 0 bottom 0 left 0 right 0 padding 5 quot  gt       lt table style  quot position fixed  quot  width  quot 100  quot  height  quot 100  quot  gt           lt tr gt               lt td style  quot width 50  quot  gt  lt  td gt               lt td style  quot text-align center quot  gt                   lt div style  quot width 200 border  5 dashed green padding 10 quot  gt                      Perfectly Centered Content                  lt  div gt               lt  td gt               lt td style  quot width 50  quot  gt  lt  td gt           lt  tr gt       lt  table gt   lt  div gt   Cleaner Wow  those five years just flew by  didn t they   lt div style  quot position fixed top 0px bottom 0px left 0px right 0px padding 5px quot  gt       lt table style  quot position fixed quot  width  quot 100  quot  height  quot 100  quot  gt           lt tr gt               lt td style  quot width 50  quot  gt  lt  td gt               lt td style  quot text-align center quot  gt                   lt div style  quot padding 10px quot  gt                       lt img src  quot Happy PM png quot  gt                       lt h2 gt Stays in the Middle lt  h2 gt                   lt  div gt               lt  td gt               lt td style  quot width 50  quot  gt  lt  td gt           lt  tr gt       lt  table gt   lt  div gt

User · Answer

This solution works if the element has width and height    x000D   x000D   wrapper   x000D    width  300px  x000D    height  200px  x000D    background-color  tomato  x000D    position  relative  x000D    x000D   x000D   content   x000D    width  100px  x000D    height  100px  x000D    background-color  deepskyblue  x000D    position  absolute  x000D    top  0  x000D    right  0  x000D    bottom  0  x000D    left  0  x000D    margin  auto  x000D    x000D   lt div class  wrapper  gt  x000D     lt div class  content  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

x000D   x000D   content   margin 0 auto  display table  float none   x000D   lt body gt  x000D     lt div gt  x000D       lt div id  content  gt  x000D        I m the content x000D       lt  div gt  x000D     lt  div gt  x000D   lt  body gt  x000D   x000D   x000D

User · Answer

This works on any random unknown width of the absolute positioned element you want to have in the centre of your container element  Demo  lt div class  quot container quot  gt     lt div class  quot box quot  gt       lt img src  quot https   picsum photos 200 300  random quot  alt  quot  quot  gt     lt  div gt   lt  div gt    container     position  relative    width  100       box     position  absolute    top  0    left  0    right  0    bottom  0    display  flex    justify-content  center    align-items  center

User · Answer

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

User · Answer

lt div style  position absolute  left 50   top 50   transform  translate -50   -50    gt      This text is centered   lt  div gt   This will center all the objects inside div with position type static or relative

User · Answer

I d like to add on to bobince s answer   lt body gt       lt div style  quot position  absolute  left  50   quot  gt           lt div style  quot position  relative  left  -50   border  dotted red 1px  quot  gt              I am some centered shrink-to-fit content   lt br   gt              tum te tum          lt  div gt       lt  div gt   lt  body gt   Improved         This makes the horizontal scrollbar not appear with large elements in the centered div   lt body gt       lt div style  quot width 100   position  absolute  overflow hidden  quot  gt           lt div style  quot position fixed  left  50   quot  gt               lt div style  quot position  relative  left  -50   border  dotted red 1px  quot  gt                  I am some centered shrink-to-fit content   lt br   gt                  tum te tum              lt  div gt           lt  div gt       lt  div gt   lt  body gt

[css] Center an element with "absolute" position and undefined width in CSS?

Examples related to css

Examples related to css-position

Examples related to center

Examples related to absolute