How to Position Child Div to the Center of Every Parents Div Using Position Absolute in CSS

How to position child div to the center of every parents div using position absolute in css

Use transform for that to the child div and it will work!

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

snippet below:

.mainDiv {

  height:500px;

  

  position: relative;

}

.mainDiv .parent1 {

  height: 250px;

  background-color: blue;

   position: relative;

}

.mainDiv .parent2 {

  height: 250px;

  background-color: yellow;

   position: relative;

}

.mainDiv .parent1 .sub1 {

  width: 100px;

  height: 100px;

  background-color: green;

  position: absolute;

    left: 50%;

    top: 50%;

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

    

}

.mainDiv .parent2 .sub2 {

  width: 100px;

  height: 100px;

  background-color: red;

  position: absolute;

    left: 50%;

    top: 50%;

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

}

<div class="mainDiv">

  <div class="parent1">

    <div class="sub1">

        

    </div>

  </div>

  <div class="parent2">

    <div class="sub2">

      

    </div>

  </div>

</div>

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

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

CSS Position child div in center

You can use flexbox for it like this:

 .parent {
   height: var(--parent-height);
   background-color: #bada55;
   position: relative;
   display: flex;
   justify-content: center;
   flex-direction: column;
}

How do I align an absolute position child element in the center of its parent div

When the cursor is positioned over each cover it will show the
complete title name in a single line (not wrapped inside the cover
container). How can I align the title right in the center of each
cover.

I think this will take care of it.

Codepen.io Demo

CSS

.cover{
  height:200px;
  width: 150px;
  background-color:#00f;
  margin-top:50px;
  margin-left:auto;
  margin-right:auto;
  position: relative;
}

.cover span{
  position:absolute;
  background-color:#0f0;
  display:none;
  color:white;

}

.cover:hover span{
  display:block;
  position: absolute;
  left:50%;  
  top:10%; /* adjust to suit */
  width:auto;
  white-space: nowrap;
  -webkit-transform:translateX(-50%);
  transform:translateX(-50%);
}

I would like to place the title a bit above the cover, not completely
over it.

I'm not sure what this means but the vertical positon can be adjusted by means of the top value.

Aligning position absolute div to middle?

The solution is to use transform: translate(-50%, -50%) on the child div, like so:

#child {
  position: absolute;
  width: 70px;
  height: 70px;
  background-color: blue;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

https://jsfiddle.net/jwoy7rxr/

This works because the transform positions the item based on a percentage from it's own point of origin.

How to Center a Group of Relative Positioned Divs Inside another Relative Positioned Div?

Solution 1: Using Flex

Try to use flex css. Using flex it will be easy for you align the items vertically or horizontally center to the parent.

Use justify-content: center; to align the divs center.

Updated Fiddle

.parentClass {

  width: 620px;

  background-color: gray;

  display: flex;

  justify-content: center;

  margin: auto;

  flex-wrap: wrap;

}

.childClass {

  width: 200px;

  height: 400px;

  background-color: white;

  position: relative;

  margin: 3px;

}

.insideChildDiv1 {

  position: absolute;

  width: 100%;

  height: 95px;

  top: 0;

  left: 0;

  background-color: black;

  color: white;

  text-align: center;

  line-height: 100px;

}

.insideChildDiv2 {

  position: absolute;

  width: 100%;

  height: 200px;

  top: 100px;

  left: 0;

  background-color: green;

}

.insideChildDiv3 {

  position: absolute;

  width: 100%;

  height: 95px;

  bottom: 0;

  left: 0;

  color: white;

  text-align: center;

  line-height: 100px;

  background-color: black;

}

<div class="parentClass">

  <div class="childClass">

    <div class="insideChildDiv1">George</div>

    <div class="insideChildDiv2"></div>

    <div class="insideChildDiv3">CEO</div>

  </div>

  <div class="childClass">

    <div class="insideChildDiv1">John</div>

    <div class="insideChildDiv2"></div>

    <div class="insideChildDiv3">Vice President</div>

  </div>

  <div class="childClass">

    <div class="insideChildDiv1">John</div>

    <div class="insideChildDiv2"></div>

    <div class="insideChildDiv3">Vice President</div>

  </div>

  <div class="childClass">

    <div class="insideChildDiv1">John</div>

    <div class="insideChildDiv2"></div>

    <div class="insideChildDiv3">Vice President</div>

  </div>

</div>

CSS: Positioning a child element relative to its parent using any position property on the parent

The question is:

Could I also achieve this [positioning the p element at the bottom] by using any position declaration(other than
static) for the parent?

Yes

From MDN:

A positioned element is an element whose computed position value is
either relative, absolute, fixed, or sticky. (In other words, it's
anything except static.)

Center absolute positioned div

If i understood your question then it will work as below.

You can do it in three ways.

No1 - Using position. Apply width 100% to button parent div and apply the button style as bellow.

.buy-btn{
    display: inline-block;       /* Display inline block */
    text-align: center;          /* For button text center */
    position: absolute;          /* Position absolute */
    left: 50%;                   /* Move 50% from left */
    bottom: 10px;                /* Move 10px from bottom */
    transform: translateX(-50%); /* Move button Center position  */
}

No2 - Using parent div, apply width 100% to your parent div and remove the postion absolute from button.

.parentDiv {
    width: 100%;            /* for full width */
    text-align: center;     /* for child element center */
 }

.buy-btn{
    display: inline-block;       /* Display inline block */
    text-align: center;          /* For button text center */
}

No3 - Using margin, apply width 100% to your parent div and remove the postion absolute from button.

.parentDiv {
    width: 100%;            /* for full width */
 }

.buy-btn{
    display: inline-block;       /* Display inline block */
    text-align: center;          /* For button text center */        
    margin: 0 auto;              /* For button center */
}

Centering child that has position absolute to a parent with display flex

Try this

.parent{

display: flex;

   justify-content: center;

   align-items: center;

   position: absolute;

   width:100%;

   height: 100%;

}

.child{

  position: absolute;

  background-color:#f00;

  border:1px solid #333;

  

}

<div class="parent">

  <div class="child">

    Object

  </div>

</div>

How to Position Child Div to the Center of Every Parents Div Using Position Absolute in CSS