Centralize div with display inline-block and position relative

Question

i'm trying to centralize in the vertically and horizontally, but without success:

https://jsfiddle.net/szg7hhph/1/embedded/result/

HTML:

<div id="new__event">
  <div class="target">
    <h2>Free Pass</h2>
  </div>
</div>


body {
  margin: 0;
}

#new__event {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms;
}
#new__event {
  pointer-events: all;
  opacity: 1;
}
#new__event .target {
  cursor: pointer;
  position: relative;
  display: inline-block;
  padding: 48px;
  width: 50%;
  margin: 0 auto;
  box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);
  background: white;
  color: #f98835;
  margin-top: 1.5rem;
}

I already try margin 0 auto, text-align, vertical-align, but the box persist in the corner..

Then, unfortunately, you can't really center it unless you first find out what hight it ends up being using javascript. Maybe you could instead have your dialogue be 20 or 30 pixels offset from the top rather than truly centered? — Joseph Marikle, Feb 27 '15 at 20:46
@JosephMarikle It’s possible using `transform`. See my answer. — aaronk6, Feb 27 '15 at 20:46

aaronk6 · Accepted Answer · 2015-02-27T20:52:56.713

9

Change the position of #new_event .target to absolute, remove the margin-top property and add the following new properties:

box-sizing: border-box;
left: 25%;
top: 50%;
transform: translateY(-50%);

This should work starting from IE 9.

Result

enter image description here

edited Feb 27 '15 at 20:52

answered Feb 27 '15 at 20:44

aaronk6

2,701
1
19
28

Very nice solution! I'll have to use that myself. It's slightly off because of a top margin, but it seems to work perfectly: https://jsfiddle.net/kya72gdd/ I was wrong in assuming it couldn't be done without a fixed height. – Joseph Marikle Feb 27 '15 at 20:50
@JosephMarikle Thanks :-) You’re right, it’s slightly off due to the `margin-top` property. I’ll update my answer. – aaronk6 Feb 27 '15 at 20:51
but what if i want put one more target? they last will be upon the first – Feb 27 '15 at 20:58
@DRX In this case, you might want to add a wrapper div (which gets the `transform` property and the related stuff). – aaronk6 Feb 27 '15 at 21:02

Centralize div with display inline-block and position relative

1 Answers1

Linked