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>
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 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 horizontally an absolute button in a div?
Try to transform: translateX(-50%);
your button
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
Center absolutely positioned div horizontally with absolute children
I am not sure why you need to absolutely position the children. Is this what you are trying to achieve: http://jsfiddle.net/k65pxydx ?
.myAbsoluteContainer {
text-align: center; /* Centers the elements horizontally */
}
.myAbsoluteChildElement {
display: inline-block;
vertical-align: middle; /* Centers the elements vertically */
}
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
centering absolute div horizontally in relative table cell
Since you gave the absolutely positioned element a width, you would just have to add left: 0; right: 0;
in order to center it horizontally.
Alternatively, since the element has a fixed, percentage-based width of 90%
, you could also just use left: 5%
to center it horizontally.
table {
width: 100%;
border: 1px solid;
height: 200px;
table-layout: fixed;
}
table td {
position: relative;
border: 1px solid
}
div {
position: absolute;
top: 20%;
bottom: 30%;
left: 0; right: 0;
border: 1px solid;
box-sizing: border-box;
padding: 5px;
width: 90%;
margin: auto;
}
<html>
<table>
<tr>
<td>
<div>Content</div>
</td>
<td> </td>
</table>
</html>
Related Topics
IE7 CSS Inheritance Does Not Work
Adding a Small Picture on the Right Side of Textfield with CSS
How to Get a Negative Value of a CSS Variables in a Calc() Expression
My Svg Image Ignores Its Stylesheet When Used as Background Image
Parent Selector Nested Inside &:Hover
How to Make a Twitter Bootstrap Modal Slide from the Side or Bottom Instead of Sliding Down
Slide Up/Down Effect with Ng-Show and Ng-Animate
CSS - Parent's Position Is Absolute and Child's Position Is Relative and Vice Versa
Inline CSS Formatting Best Practices - Two Questions
How to Center Twitter-Bootstrap 3 Navbar Links
Invalid Property Value on Background-Image
Prevent a Pseudo Element from Triggering Hover
Footer Consisting of Two Right Triangles
Offset Border Effect in Pure CSS
Bootstrap.Css: .Container:Before Display Table
How to Use Bootstrap Modals Without Loading the Entire Library