How to center absolute div horizontally using CSS?
CssHtmlCenterAbsoluteCss Problem Overview
I've a div and want it to be centered horizontally - although I'm giving it margin:0 auto;
it's not centered...
.container {
position: absolute;
top: 15px;
z-index: 2;
width:40%;
max-width: 960px;
min-width: 600px;
height: 60px;
overflow: hidden;
background: #fff;
margin:0 auto;
}
Css Solutions
Solution 1 - 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.
>
> If 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>
Solution 2 - Css
This doesn't work in IE8 but might be an option to consider. It is primarily useful if you do not want to specify a width.
.element
{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
Solution 3 - Css
Although above answers are correct but to make it simple for newbies, all you need to do is set margin, left and right. following code will do it provided that width is set and position is absolute:
margin: 0 auto;
left: 0;
right: 0;
You can also use other values for width like max-content
,fit-content
etc if you don't want to set a value with units
Demo:
.centeredBox {
margin: 0 auto;
left: 0;
right: 0;
/** Position should be absolute */
position: absolute;
/** And box must have a width, any width */
width: 40%;
background: #faebd7;
}
<div class="centeredBox">Centered Box</div>
Solution 4 - Css
.centerDiv {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
text-align:center;
}
Solution 5 - Css
Flexbox? You can use flexbox.
.box {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
}
.box div {
border:1px solid grey;
flex: 0 1 auto;
align-self: auto;
background: grey;
}
<div class="box">
<div class="A">I'm horizontally centered.</div>
</div>
Solution 6 - Css
so easy, only use margin and left, right properties:
.elements {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
You can see more in this tip => How to set div element to center in html- Obinb blog
Solution 7 - Css
Here is a link please use this to make the div in the center if position is absolute.
HTML:
<div class="bar"></div>
CSS:
.bar{
width:200px;
border-top:4px solid red;
position:absolute;
margin-left:auto;
margin-right:auto;
left:0;
right:0;
}
Solution 8 - Css
Both center vertically and horizontally
use left:50%;top:50%; transform: translate(-50%, -50%);
.centeredBox {
margin: 0 auto;
left: 50%;
top:50%;
/** Position should be absolute */
position: absolute;
/** And box must have a width, any width */
width: 40%;
background: #faebd7;
text-align: center;
padding:10px;
transform: translate(-50%, -50%);
}
<div class="centeredBox">Centered Box</div>
Solution 9 - Css
You can't use margin:auto;
on position:absolute;
elements, just remove it if you don't need it, however, if you do, you could use left:30%;
((100%-40%)/2) and media queries for the max and min values:
.container {
position: absolute;
top: 15px;
left: 30%;
z-index: 2;
width:40%;
height: 60px;
overflow: hidden;
background: #fff;
}
@media all and (min-width:960px) {
.container {
left: 50%;
margin-left:-480px;
width: 960px;
}
}
@media all and (max-width:600px) {
.container {
left: 50%;
margin-left:-300px;
width: 600px;
}
}