cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <h1>Experiments in Vertical Centering</h1>

<span class="works">Works! See notes for details.</span>
<span class="static-hw">Requires known dimensions.</span>
<span class="no-worky">Nope.</span>

<div id="xlate" class="attempt works">
  <h3><a href="https://css-tricks.com/centering-percentage-widthheight-elements/">Translate</a></h3>
  <div class="outer">
    <div class="inner">Relies on <a href="http://caniuse.com/transforms2d">CSS2 transforms</a>, so mind your browser support. </div>
  </div>
</div>

<div id="flex" class="attempt works">
  <h3><a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">Flex</a></h3>
  <div class="outer">
    <div class="inner">Couldn't be simpler to implement. Uses <a href="http://caniuse.com/flexbox">Flexbox</a>, so mind your browser support.</div>
  </div>
</div>

<div id="display-table-cell" class="attempt works">
  <h3>Display Table Cell</h3>
  <div class="outer">
    <div class="inner">Works by setting table-type styling on existing markup. From CSS 2.1, so <a href="http://caniuse.com/#feat=css-table">pretty good browser support</a>.</div>
  </div>
</div>

<div id="ghost" class="attempt works">
  <h3><a href="https://css-tricks.com/centering-in-the-unknown/">CSS Tricks: Ghost Element</a></h3>
  <div class="outer">
    <div class="inner">Relies on pseudo-elements and inline-block, so mind your browser support.</div>
  </div>
</div>

<div id="table" class="attempt works">
<h3>Simple Table</h3>
<table class="outer">
  <tr>
    <td class="inner">By using vertical alignment (native to a table), a variable height child can be vertically centered within a known height parent.</td>
  </tr>
</table>
</div>

<div id="simon" class="attempt static-hw">
  <h3><a href="https://designshack.net/articles/css/how-to-center-anything-with-css/#comment-684580538">Simon's Margin Auto</a></h3>
  <div class="outer">
    <div class="inner">Requires known height for <code>.inner</code>. <code>.inner</code> is positioned absolutely, but <code>.outer</code> will make it play nice with other elements.</div>
  </div>
  <p>This is the same technique as <a href="http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/">http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/</a>.</p>
</div>

<div id="yuhu" class="attempt no-worky">
  <h3><a href="http://www.jakpsatweb.cz/css/css-vertical-center-solution.html">Vertical Centering in CSS by Yuhu</a></h2>
  <div class="outer">
    <div class="inner">
      <div class="innie-inner">
      Puts table styling on semantic elements; requires extra element. Vertical center isn't correct in IE6 and IE7 even with hacks - see <a href="https://codepen.io/KatieK2/pen/BKFor">https://codepen.io/KatieK2/pen/BKFor</a>.
      </div>
    </div>
  </div>
</div>

<div id="valign" class="attempt no-worky">
  <h3>v-align</h3>
  <div class="outer">
    <div class="inner">
      <img src="http://placekitten.com/64/64?image=12" />
      <code>vertical align</code> is to specify how inline elements will align with each other. It's not flexible enough for most vertical centering needs, which is why it gets a "nope".
    </div>
  </div>
  <p>See <a href="http://reference.sitepoint.com/css/vertical-align">Sitepoint</a> or <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align">MDN</a> for more on vertical-align.</p>
</div>
            
          
!
            
              #xlate .outer { position: relative; }
#xlate .inner { 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#flex .outer { display: flex; -ms-flex-align: center; }
#flex .inner { margin: auto; }

#display-table-cell .outer { display: table; }
#display-table-cell .inner { display: table-cell; vertical-align: middle; text-align: center; }

#ghost .outer { text-align: center; }
#ghost .outer:before { content: ''; display: inline-block; height: 100%;  vertical-align: middle; margin-right: -0.25em; }
#ghost .inner { display: inline-block; vertical-align: middle; }

#table table { border-collapse: separate; border-spacing: 2px; }
#table .inner { text-align: center; vertical-align: middle; }

#simon .outer { position: relative; }
#simon .inner { height: 100px;
  margin: auto;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; 
 }

#yuhu .outer { display: table; overflow: hidden; *position: relative; }
#yuhu .inner { display: table-cell; vertical-align: middle; *position: absolute; *top: 50%; }
#yuhu .innie-inner { *position: relative; *top: -50%; }

#neg-mar .inner { position: relative; top: 50%; left: 50%; height: 6rem; margin-top: -3rem; margin-left: -9rem; }

#valign .outer {  }
#valign .inner {  }
#valign img { vertical-align: middle /*top bottom*/; }

/* Designations */
span { margin: 0 0 1rem 1rem; border: solid black 1px; padding: .5em; float: left; font-size: 75%; font-style: italic; }
span + span { margin-left: .5rem; }
.static-hw { background-color: #f5af7d !important; } 
.no-worky { background-color: #c86a6a !important; } 
.works { background-color: #a5af74 !important; } 

/* Box Template */
.attempt { float: left; width: 24rem; margin-bottom: 1rem; margin-left: 1rem; border: solid #000 1px; }
.attempt:first-of-type { clear:left; }
.outer { height: 12rem; width: 22rem; border: dotted black 1px; margin: 1rem }
.inner { width: 18rem; margin: 0 auto; border: solid black 1px; padding: .5rem; box-sizing: border-box; }
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console