Center an item with position: relative

Question

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.

Your codez will be HUGELY appreciated, as answering your question without them is a little hard. :) — Bazzz, Jul 08 '11 at 15:01
You should add your solution as a separate answer, and accept that answer so everybody knows this question is answered. — NGLN, Jul 08 '11 at 20:10
When position is set (relative, absolute, etc.), "margin: 0 auto" doesn't seem to work. The important trick here is "text-align:center". It solved my problem. Thank you so much! — Chris, Aug 08 '13 at 18:44

score 139 · Answer 1 · edited Aug 27 '19 at 10:30

139

Much simpler:

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

You are now centered in your parent element. You can do that vertically too.

edited Aug 27 '19 at 10:30

injecteer

20,038
4
45
89

answered Feb 04 '18 at 13:03

Hexxefir

1,600
1
8
9

This won't work if the element is not the first child (not absolutely positioned first child). – Bikram Kumar Mar 16 '22 at 14:30
(this is on the inner div) – Noel Evans Apr 26 '22 at 08:41

score 28 · Answer 2 · edited Dec 03 '15 at 19:46

28

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;
}

edited Dec 03 '15 at 19:46

JGallardo

11,074
10
82
96

answered Jul 08 '11 at 18:08

DADU

6,482
7
42
64

3

Mozilla has its own prefix, -moz. There is also a new Flexbox, see http://css-tricks.com/old-flexbox-and-new-flexbox/ – DADU Feb 22 '13 at 23:53

spraff · Answer 3 · 2011-07-08T15:08:49.473

24

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.

edited Jul 08 '11 at 15:08

answered Jul 08 '11 at 15:02

spraff

32,570
22
121
229

Best answer if positioning horizontally – colemerrick Aug 29 '19 at 16:17

score 17 · Answer 4 · edited Aug 17 '16 at 23:28

17

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.

edited Aug 17 '16 at 23:28

MujtabaFR

5,956
6
40
66

answered Aug 17 '16 at 21:20

Matija

171
1
2

this was exactly what I needed for my project, thanks – bowlerae Feb 22 '17 at 01:16
1

Its not accurate, but nice solution. The better result would be if you know element width and height, for instance w: 40, h: 30, then left: calc(50% - 20px), right: calc(50% - 15px). that would center element accurately – Madman Jun 15 '17 at 11:18

score 1 · Answer 5 · answered Apr 17 '19 at 20:14

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>

score 1 · Answer 6 · answered Dec 09 '22 at 16:13

.parent {
    width: 100%;
    height: 30vh;    
    display: flex;
    justify-content: center;
    align-items: center;
}
.child {
    position: relative;
    height: 20vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }

Just make sure the height of the parent is greater than the height of the child.

score 0 · Answer 7 · answered Jan 19 '23 at 12:19

0

An other simple solution I did not yet see here:

.parent{
    display: flex;
    flex-direction: column;
    height: 40vh;
    width: 40vw;
}

.child{
    margin:auto;
}

answered Jan 19 '23 at 12:19

cupcake

41
4

Center an item with position: relative

7 Answers7

Dont forget this

Linked