Centralize div with display inline-block and position relative

问题:

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..

回答1:

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

转载请标明出处:Centralize div with display inline-block and position relative

文章来源: Centralize div with display inline-block and position relative