Center Align Position Absolute Object Horizontally

center align position absolute object horizontally

A useful trick to center elements is to use the transform: translate style together with either top, margin-left left or margin-top.

To answer your question, you have to apply the following styles to your .slider a.downarrow element:

left: 50%;
transform: translateX(-50%);

The way this works is because if translate is used with a percentage value, its value is calculated based on the elements height/width on which it is applied on.

top, margin-left left and margin-top percentage values are calculated based on the parent element or in case the element has position: absolute applied to it based on the nearest parent with position: relative/absolute.

To center an element you just need to apply a value of 50% to either top, margin-left left or margin-top and a value of -50% to translate.

For left and margin-left you have to use translateX(-50%) and for the others translateY(-50%).

EDIT: Added an explanation

How to center absolute div horizontally using CSS?

You need to set left: 0 and right: 0.

This specifies how far to offset the margin edges from the sides of the window.

Like 'top', but specifies how far a box's right margin edge is offset to the [left/right] of the [right/left] edge of the box's containing block.

Source:
http://www.w3.org/TR/CSS2/visuren.html#position-props

Note: The element must have a width smaller than the window or else it will take up the entire width of the window.
You could use media queries to specify a minimum margin, and then transition to auto for larger screen sizes.

.container {
  left:0;
  right:0;

  margin-left: auto;
  margin-right: auto;

  position: absolute;
  width: 40%;

  outline: 1px solid black;
  background: white;
}

<div class="container">
  Donec ullamcorper nulla non metus auctor fringilla.
  Maecenas faucibus mollis interdum.
  Sed posuere consectetur est at lobortis.
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
  Sed posuere consectetur est at lobortis.
</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>

How to center contents of an absolute div horizontally

Use width:100% in absolute div

.home .center {
    position: absolute;
    bottom: 0;
    top:30px;
    text-align: center;
    width:100%;
}

Updated fiddle

Horizontally center absolute positioned element below the center of another element

There are different ways to do this, but I found that the easiest one is to do the following to the abolute positioned element:

  top: 0;
  left: 50%;
  transform: translateX(-50%);

Using this method you do not need to know the size either of the elements.

How does it work?

The left: 50% places it at the middle of the ancestor element (here 100% is the size of the ancestor element).
The transform: translateX(-50%) makes the center of the absolutely positioned element come where it's left corner would otherwise be (here 100% is the width of the absolutely positioned element).

To make this work it's also important that the parent element has the same width as the button. I've used a parent element to contain both the button and the aboslutely positioned element i so that top: 0 is directly below the button.

Simplified html:

<span class="container">
  <div class="button">Click Me!</div>
  <div class="relative">
    <div class="absolute">Absolute positioned</div>
  </div>
</span>

Simplified less/scss

.container {
  display: inline-block;

  .button { ... }

  .relative {
    position: relative;

    .absolute {
      position: absolute;

      top: 0;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}

Fiddle: https://jsfiddle.net/y4p2L9af/1/

How do you horizontally center an element with position: absolute ?

Generally, when an element is position: absolute the parent is position: relative.
Then, the absolute element is left: 50%; transform: translateX(-50%); for horizontal centering. For vertical centering top: 50%; transform: translateY(-50%);

.parent {

  position: relative;

  height: 200px; // needs height/width cause 'absolute' child takes no space

  width: 200px;

  border: 1px solid red;

}

.child-1 {

  position: absolute;

  height: 50px;

  width: 50px;

  border: 1px solid blue;

  

  left: 50%;

  transform: translateX(-50%);

}

.child-2 {

  position: absolute;

  height: 50px;

  width: 50px;

  border: 1px solid orange;

  

  top: 50%;

  transform: translateY(-50%);

}

.child-3 {

  position: absolute;

  height: 50px;

  width: 50px;

  border: 1px solid green;

  

  top: 50%;

  left: 50%;

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

}

<div class='parent'>

  <div class='child-1'>horizontal</div>

  <div class='child-2'>vertical</div>

  <div class='child-3'>both</div>

<div>

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 */
}

How do I horizontally center an absolute positioned element inside a 100% width div?

If you want to align center on left attribute.

The same thing is for top alignment, you could use margin-top: (width/2 of your div), the concept is the same of left attribute.

It's important to set header element to position:relative.

try this:

#logo {
    background:red;
    height:50px;
    position:absolute;
    width:50px;
    left:50%;
    margin-left:-25px;
}

DEMO

If you would like to not use calculations you can do this:

#logo {
  background:red;
  width:50px;
  height:50px;
  position:absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}

DEMO2

React Native absolute positioning horizontal centre

Wrap the child you want centered in a View and make the View absolute.

<View style={{position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center'}}>
  <Text>Centered text</Text>
</View>

Center Align Position Absolute Object Horizontally