CODEWITHSUNDEEP
htmlcss
bodacydo
bodacydo

Reputation: 79309

How do I center an absolutely positioned HTML block element? (Relative to its parent?)

I've the following HTML:

<div id="parent" style="height: 300px; position: relative">
  <div id="child" style="width: 100px; height: 50px; bottom: 0; position: absolute">
     ... content ...
   </div>
</div>

In this HTML I've positioned #child at the bottom of #parent using absolute positioning.

However I'd also like to center #child within #parent. Parent's width changes through its use case so I can't just calculate it in pixels and apply half of pixels (to center) to child's left property.

Applying text-align: center to #parent doesn't center #child as it's absolutely positioned.

Applying text-align: center to #child centers content within child and doesn't affects its own positioning.

Any ideas how to center #child within #parent without JavaScript, if parent sometimes dynamically changes it's width?

Upvotes: 0

Views: 95

Answers (6)

hengecyche
hengecyche

Reputation: 409

Using flextable and margin auto can center a absolute positioned element

        #parent{
            position:relative;
            display: flex;
        }

        #child
        {
            margin:auto; 
        }

Upvotes: 0

dimitar
dimitar

Reputation: 1057

.parent {
    position: relative;
    height: 300px; 
}
.child {
    width: 100px;
    height: 50px; 
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px; /* the half of the element */
}

Upvotes: 1

CoursesWeb
CoursesWeb

Reputation: 4237

It works with this css for the absolute positioned element: 

#child {
 position: absolute;
 left:0; right:0;
 margin: 5px auto;
}

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 105873

you could keep elements within the flux:

1) using the display:table; property (requires an extra element, here body used as so )

html,
body {
  width: 100%;
  margin:0;
}
div {
  border:solid;
  }
body {
  display:table;
  }
#parent {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
}
#child {
  margin: auto;
}
<div id="parent" style="height: 300px; position: relative">
  <div id="child" style="width: 100px; height: 50px; ">
    ... content ...
  </div>
</div>

2) using the display:flex; property (young browser only). 

div {
  border:solid;
  }

#parent, 
#child /* want to center child content too ? */{
  display: flex;
  justify-content:center;
  align-items:center;
}
<div id="parent" style="height: 300px; position: relative">
  <div id="child" style="width: 100px; height: 50px; ">
    ... content ...
  </div>
</div>

Upvotes: 0

cdwyer
cdwyer

Reputation: 697

The easiest way to accomplish this is with transform:

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Also, just a heads-up...your inline styles for #child & #parent are missing a ";" at the end.

Upvotes: 0

C3roe
C3roe

Reputation: 96240

Position the child left:0 and right:0, and set the margin to auto.

#parent {
  height: 300px;
  position: relative;
  background: #ccc;
}
#child {
  width: 100px;
  height: 50px;
  bottom: 0;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  background: red;
}
<div id="parent">
  <div id="child">
    ... content ...
  </div>
</div>

Upvotes: 2

Related Questions