Center an item with position: relative
Solution 1
Much simpler:
position: relative;
left: 50%;
transform: translateX(-50%);
You are now centered in your parent element. You can do that vertically too.
Solution 2
Alternatively, you may also use the CSS3 Flexible Box Model. It's a great way to create flexible layouts that can also be applied to center content like so:
#parent {
-webkit-box-align:center;
-webkit-box-pack:center;
display:-webkit-box;
}
Solution 3
If you have a relatively- (or otherwise-) positioned div you can center something inside it with margin:auto
Vertical centering is a bit tricker, but possible.
Solution 4
You can use calc
to position element relative to center. For example if you want to position element 200px
right from the center .. you can do this :
#your_element{
position:absolute;
left: calc(50% + 200px);
}
Dont forget this
When you use signs +
and -
you must have one blank space between sign and number, but when you use signs *
and /
there is no need for blank space.
Solution 5
Another option is to create an extra wrapper to center the element vertically.
#container{
border:solid 1px #33aaff;
width:200px;
height:200px;
}
#helper{
position:relative;
height:50px;
top:50%;
border:dotted 1px #ff55aa;
}
#centered{
position:relative;
height:50px;
top:-50%;
border:solid 1px #ff55aa;
}
<div id="container">
<div id="helper">
<div id="centered"></div>
</div>
<div>
Flippinmonk
Updated on September 07, 2020Comments
-
Flippinmonk over 3 years
I've got a menu that appears on hover over an absolutely positioned div. All of the menu items have to be relatively positioned because the absolutely div will appear multiple times on a page and will appear in multiple sizes in one instance.
How would I center multiple items with
position: relative
both vertically and horizontally when I won't know the the size of the parent div?I know the
position: absolute
trick with negative margins, but this situation calls for something different.Here's the code:
.OuterCase { position : absolute; width : 100%; height : 100%; text-align: center; } .InnerItem { width : 38px; height : 38px; display: inline-block; }
I've got it to center the items horizontally; it's getting the vertical that's being a bit elusive.