Center an absolutely positioned element horizontally within a relative positioned container

Question

Center an absolutely positioned element horizontally within a relative positioned container

Struggling to center an inner element with a position: absolute property inside of a position: relative element? Take a look at this code snippet (https://jsfiddle.net/qL0c8cau/):

html,body,div {margin:0;padding:0;}
.one {
  position: relative;
  margin: 50px auto;
  width: 200px;
  height: 100px;
  background: #900;
}
.two {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  background: #0f0;
  opacity: 0.3;
  height: 160px;
  width: 400px;
}

<div class="one">
  
  <div class="two"></div>
  
</div>

Frustrated because everything seems set up correctly, yet the alignment isn't quite right? What's the mistake in my approach?

html css

Answer 1

Answer №1

Don't forget to add the following CSS code snippet:

.two {
  position: absolute;
  top:50%;
  left: 50%;
  transform:translate(-50%,-50%);
  margin: auto;
  background: #0f0;
  opacity: 0.3;
  height: 160px;
  width: 400px;
}

This piece of code ensures that the inner container will always stay centered within the outer container, regardless of their sizes.

html,body,div {margin:0;padding:0;}
.one {
  position: relative;
  margin: 50px auto;
  width: 200px;
  height: 100px;
  background: #900;
}
.two {
  position: absolute;
  top:50%;  /* this to center the box w.r.t to parent */
  left: 50%;/* this to center the box w.r.t to parent */
  /* The above two lines partially center it; the next line centers it perfectly by moving it 50% left and top internally */
  transform:translate(-50%,-50%);
  margin: auto;
  background: #0f0;
  opacity: 0.3;
  height: 160px;
  width: 400px;
}

<div class="one">
  <div class="two"></div>
</div>

Answer 2

Don't forget to add the following CSS code snippet:

.two {
  position: absolute;
  top:50%;
  left: 50%;
  transform:translate(-50%,-50%);
  margin: auto;
  background: #0f0;
  opacity: 0.3;
  height: 160px;
  width: 400px;
}

This piece of code ensures that the inner container will always stay centered within the outer container, regardless of their sizes.

html,body,div {margin:0;padding:0;}
.one {
  position: relative;
  margin: 50px auto;
  width: 200px;
  height: 100px;
  background: #900;
}
.two {
  position: absolute;
  top:50%;  /* this to center the box w.r.t to parent */
  left: 50%;/* this to center the box w.r.t to parent */
  /* The above two lines partially center it; the next line centers it perfectly by moving it 50% left and top internally */
  transform:translate(-50%,-50%);
  margin: auto;
  background: #0f0;
  opacity: 0.3;
  height: 160px;
  width: 400px;
}

<div class="one">
  <div class="two"></div>
</div>

Answer 3

Answer №2

To center a div inside .two, try using transform: translateX(-25%); instead of the traditional left and right properties. This method can be more effective when dealing with positioning issues, especially if .two is nested within .one.

Check out this JSFiddle link for reference.

.two {
  position: absolute;
  top: 0;
  bottom: 0;
  transform: translateX(-25%);
  margin: auto;
  background: #0f0;
  opacity: 0.3;
  height: 160px;
  width: 400px;
}

Answer 4

To center a div inside .two, try using transform: translateX(-25%); instead of the traditional left and right properties. This method can be more effective when dealing with positioning issues, especially if .two is nested within .one.

Check out this JSFiddle link for reference.

.two {
  position: absolute;
  top: 0;
  bottom: 0;
  transform: translateX(-25%);
  margin: auto;
  background: #0f0;
  opacity: 0.3;
  height: 160px;
  width: 400px;
}

Answer 5

Answer №3

The main issue highlighted here is that the inner element (.two) has a width that exceeds its parent's width (.one). I have made some adjustments for clarity (like changing color and opacity) to demonstrate this:

*If intentionally increasing the inner element's width beyond its parent is your goal, please refer to Guatam's answer below.

html,
body,
div {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.one {
  width: 400px;
  height: 200px;
  margin: 50px auto;
  position: relative;
  background: red;
}

.two {
  height: 160px;
  width: 160px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: blue;
}

<div class="one">

  <div class="two"></div>

</div>

Answer 6

The main issue highlighted here is that the inner element (.two) has a width that exceeds its parent's width (.one). I have made some adjustments for clarity (like changing color and opacity) to demonstrate this:

*If intentionally increasing the inner element's width beyond its parent is your goal, please refer to Guatam's answer below.

html,
body,
div {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.one {
  width: 400px;
  height: 200px;
  margin: 50px auto;
  position: relative;
  background: red;
}

.two {
  height: 160px;
  width: 160px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: blue;
}

<div class="one">

  <div class="two"></div>

</div>

Answer 7

Answer №4

When working with a smaller px width within the nested div

You are nesting a 400px width inside a 200px width

As a result, this is why you see it displayed like that

To properly center a div, its size should be relative to the parent element

    html,body,div {margin:0;padding:0;}
    .one {
      position: relative;
      margin: 50px auto;
      width: 400px;
      height: 100px;
      background: #900;
    }
    .two {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      margin: auto;
      background: #0f0;
      opacity: 0.3;
      height: 160px;
      width: 200px;
    }

    <div class="one">
      
      <div class="two"></div>
      
    </div>

Answer 8

When working with a smaller px width within the nested div

You are nesting a 400px width inside a 200px width

As a result, this is why you see it displayed like that

To properly center a div, its size should be relative to the parent element

    html,body,div {margin:0;padding:0;}
    .one {
      position: relative;
      margin: 50px auto;
      width: 400px;
      height: 100px;
      background: #900;
    }
    .two {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      margin: auto;
      background: #0f0;
      opacity: 0.3;
      height: 160px;
      width: 200px;
    }

    <div class="one">
      
      <div class="two"></div>
      
    </div>

Answer 9

Answer №5

For an alternative solution to your issue, consider utilizing flex! It's a more convenient and modern approach.

Check the browser support for flex here

.wrap {
  display: flex;
  justify-content: center;
}

.one {
  display: flex;
  width: 400px;
  height: 200px;
  background: #fa0;
  justify-content: center;
  align-items: center;
}

.two {
  background: #627;
  height: 160px;
  width: 200px;
}

<div class="wrap">
  <div class="one">
    <div class="two"></div>
  </div>
</div>

Answer 10

For an alternative solution to your issue, consider utilizing flex! It's a more convenient and modern approach.

Check the browser support for flex here

.wrap {
  display: flex;
  justify-content: center;
}

.one {
  display: flex;
  width: 400px;
  height: 200px;
  background: #fa0;
  justify-content: center;
  align-items: center;
}

.two {
  background: #627;
  height: 160px;
  width: 200px;
}

<div class="wrap">
  <div class="one">
    <div class="two"></div>
  </div>
</div>

Center an absolutely positioned element horizontally within a relative positioned container

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Preserve numerous inputs in local storage

Bootstrap 4 modal with scrollspy feature for a seamless full-screen experience

Encountering a blank webpage displaying a warning that reads, "The use of 'event.returnValue' is outdated

Updating the UI in Angular for keyboard events is not working as expected

Position div at the bottom using CSS

Accessing administrator account through mysqli and PHP authentication

Struggling to remove the image tag from the jQuery ajax response

The Bootstrap navigation bar drop-down feature is not displaying the menu

Exploring the wonders of CSS with Socialchef

Transferring information to the controller and refreshing the interface (Single-page design)

Dealing with Unintended CSS Hover Effects That Just Won't Quit

Is there a way to show a fallback message for unsupported video file formats?

Deactivate interactive functions on the mat-slider while preserving the CSS styling

Improving the utilization of variables in HTML

"Create a dynamic and user-friendly responsive navbar using Bootstrap with toggle

Currently, my goal is to create a functional copy button through the use of JavaScript

Display content from an external HTML page within a div using Ionic

Determining the Size and Color of Squares in a Treemap Based on Content with D3.js

Issue with collapsed accordion toggle functionality

Adjusting the vertical dimension of an Angular 17 Material Dropdown Field?