CSS HTML

[Solved – 5 Answers] CSS – HTML – How to center absolutely positioned element in div

We need to place a div (with position:absolute;) element in the center of the window. But we having problems doing so, because the width is unknown.

It needs to be adjusted as the width is responsive.

Css Code
.center {
			  left: 50%;
			  bottom:5px;
			}

Any ideas?

This is one of the solution :

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

You can try this :

Html Code
#content {
  position: absolute; 
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
  width: 100px; /* Need a specific value to work */
}
<body>
  <div>
    <div id="content">
      I'm the content
    </div>
  </div>
</body>

Responsive Solution :

For responsive design or unknown dimensions in general if you don’t need to support IE8 and lower.

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

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

Css Code
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%);

Just wanted to add if someone wants to do it with single div tag then here the way out:

See also  [Solved-11Answers] How to Vertically align text next to an image

Taking width as 900px.

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

In this case one should know the width beforehand.

This work for vertical and horizontal

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

and if you want make element center of parent, set position of parent relative

Css Code
#parentElement{
 		     position:relative
		  }

Edit:

For vertical center align set height to your element.
If you want make element center of parent, set position of parent to relative

This is one of the solution :

Css Code
.absolute-center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

Absolute Centre
HTML :

Html Code
<div class="parent">
 		 <div class="child">
 		   <!-- content -->
		  </div>
		</div>

CSS :

Css Code
.parent {
  position: relative;}
.child{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

Using text-align.

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

Preferred centering method:

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

absolute block element positioning
margin auto
same left/right, top/bottom

Try this solution :

Css Code
#container
{
  position: relative;
  width: 100%;
  float:left
}
#container .item
{
  width: 50%;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
}

About the author

Wikitechy Editor

Wikitechy Founder, Author, International Speaker, and Job Consultant. My role as the CEO of Wikitechy, I help businesses build their next generation digital platforms and help with their product innovation and growth strategy. I'm a frequent speaker at tech conferences and events.

Add Comment

Click here to post a comment

X