Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                mixin center(modifier)
  .wrap(class='wrap-' + modifier)
    .inner(class='inner-' + modifier)
      h2 Centering with #{modifier}
      ol
        block
    

h1 CSS only, ver&shy;ti&shy;cal & ho&shy;ri&shy;zont&shy;al cen&shy;ter&shy;ing me&shy;thods
h3
  a(target="_blank", href="http://app.crossbrowsertesting.com/public/id40b3d0c16e78ac/screenshots/z151532500db731c72e5?size=small&type=windowed") see browser shots
  |&nbsp;
  a(target="_blank", href="http://stackoverflow.com/questions/6490252/vertically-centering-a-div-inside-another-div/6490283#6490283") stackoverflow answer

+center('table')
  li [-] .wrap needs a set width
  li [-] 
    a(href="http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/#tables") uses table-layout
  li [+] works everywhere also legacy browsers like IE8+
  li [+] .inner width/height scales .wrap nicely with the content
  li [!] conisder wrapping '.wrap' with a <br/> display:table, width: 100%, table-layout: fixed <br/>for better perf, and auto-width

+center('inline-block')
  li [-] font-size should be set on .inner explicitly
  li [+] works for unknown dimensions of both .wrap and .inner
  li [+] 
    a(href="http://caniuse.com/#feat=inline-block") awesome browser support
  li [+] .inner width/height scales .wrap nicely with the content

+center('transform')
  li [-] .inner will outgrow .wrap if content is too high
  li [+] works in all modern browsers
  li [+] is very nice to center icons & images
  li [+] does not rely on a parent element 

+center('flexbox')
  li [+] did not find any drawbacks with this method yet
  li [+] no styles needed on the inner element
  li [+] works in all modern browser
  li [-] Does not work in pre flex-box borwser

+center('grid')
  li [+] minimal markup
  li [+] no styles needed on the inner element
  li [~] works in most modern browsers
  li [-] Does not work in pre grid borwser

+center('posabs')
  li [+] works everywhere
  li [-] need to specify the .inner width and height
  li [-] .wrap will not scale when .inner grows

              
            
!

CSS

              
                /* 
 * CSS only centering methods
 *
 * All tehniques adapt the width of .inner to 
 * its content, max-with can be used to limit it.
 */

/* 
 * table centering
 *
 * [1] Makes it possible to vertical align
 * [2] Since its not in a table layout, width needs to be specified
 *     with a fall-back
 * [3] Centers the content vertically
 * [4] Centers the content horizontally
 * [5] Makes sure text-align and vertical-align work
 * [6] Resets the text-alignment to left (consider removing
 *     if contents need to be centered as well)
 */
.wrap-table {
  display: table-cell;     /* [1] */
  width: 1000px;           /* [2] */
  width: 100vw;            /* [2] */
  vertical-align: middle;  /* [3] */
  text-align: center;      /* [4] */
}

.inner-table {
  display: inline-block;   /* [5] */
  text-align: left;        /* [6] */
}

/* 
 * inline-block centering
 *
 * [1] Sets font-size to 0.0001px to avoid gaps between 
 *     the inline-block elements. Not 0 because IE7 and below
 *     somehow dislike font-size 0.
 * [2] Centers contents horizontally
 * [3] Adds a before element to vertical-align the .inner element
 * [4] Sets pseudo element to inline-block to make sure
 *     vertical-align works
 * [5] Makes sure the the element takes the full height of the wrap
 * [6] inner needs to be inline-block for vertical-align
 * [7] Resets the text-alignment to left (consider removing
 *     if contents need to be centered as well)
 * [8] Sets the font-size back to the regular font-size
 *     can be problematic when using font-size inheritance,
 *     consider a different inline-block gap avoiding technique:
 *     https://css-tricks.com/fighting-the-space-between-inline-block-elements/
 */
.wrap-inline-block {
  font-size: 0.0001px;            /* [1] */ 
  text-align: center;             /* [2] */
  &:before {                      /* [3] */
    content: '';                  /* [3] */
    display: inline-block;        /* [4] */
    vertical-align: middle;       
    height: 100%;                 /* [5] */
  }
}

.inner-inline-block {
  display: inline-block;          /* [6] */
  text-align: left;               /* [7] */
  font-size: 1rem;                /* [8] */
  vertical-align: middle;
}

/* 
 * transform centering
 *
 * [1] needs position relative or absolute in order to use
 *     top & left position
 * [2] Inline-block so the element takes the with of its content
 * [3] Puts the upper left corner to the center of the wrapping element
 *     in this case % is relative to the parent dimensions 
 * [4] translates the element back to the center. in this case % is relative
 *     to the element it self. Use autoprefixer or something to make this
 *     work wherever you want it to.
 */
.inner-transform {
  position: relative;                /* [1] */ 
  display: inline-block;             /* [2] */ 
  top: 50%; left: 50%;               /* [3] */ 
  transform: translate(-50%,-50%);   /* [4] */
}

/* 
 * flexbox centering
 *
 * [1] wrap need to be set to flex to be able to use justify-content
 * [2] Makes sure the contents are centered horizontally since the 
 *     default flexbox direction is set to row
 * [3] centers the inner element vertically
 */
.wrap-flexbox {
  display: flex;                /* [1] */ 
  justify-content: center;      /* [2] */
  align-items: center;          /* [3] */
}

/* 
 * grid centering
 *
 * [1] sets the parent to display grid
 * [2] Makes sure everything is centered on the x and y axis
 */
.wrap-grid {
  display: grid;                   /* [1] */
  place-content: center;           /* [2] */
}

/* 
 * absolute centering
 *
 * [1] sets the parent to position relative, can be absolute as well.
 *     makes sure the inner element will be relative to this one
 * [2] Places the upper left corner to the center of the wrap element
 * [3] element needs to have set dimensions to use negative margins
 * [4] placed element back to the center by pushing it up and left by half its size
 * [5] makes sure padding is conisdered in placement
 * [6] by uncommenting this you can avoid 3, 4 and 5
 */
.wrap-posabs {
  position: relative;                    /* [1] */
}
.inner-posabs {
  position: absolute;
  top: 50%; left: 50%;                   /* [2] */
  height: 200px; width: 500px;           /* [3] */
  margin: -100px 0 0 -250px;             /* [4] */
  box-sizing: border-box;                /* [5] */
  /* transform: translate(-50%,-50%); */ /* [6] */
}






/* demo stlyes, can be ignored fo centering */
@import url('https://fonts.googleapis.com/css?family=Space+Mono:400,700i');

body {
  font-family: 'Space Mono', monospace;
  font-size: .9rem;
  line-height: 1.4;
  font-weight: 400;
  background-color: aquamarine;
  color: white;
}
a {
  color: #212121;
  &:hover {
    text-decoration: none;
  }
}

h1, h3 {
  text-align: center;
  color: white;
  font-weight: 200;
  line-height: 1.1;
}
h1 {
  font-size: 3.5rem;
  font-weight: 400;
  padding: 0 0.5em;
  font-weight: bold;
  font-style: italic;
}
h3 {
  margin-bottom: 3rem;
}
h2 {
  margin: -0.25em 0 .25em;
  font-weight: 200;
  color: HotPink;
  font-weight: bold;
  font-style: italic;
  
}
ol {
  padding: 0;
  list-style: none;
  margin-bottom: 0;
}
/*
 * code for the demo, none of this is needed its 
 * just to visualize the  different methods
 */
.wrap {
  height: 500px;
  min-height: 500px;
  background: WhiteSmoke;
  background: repeating-linear-gradient(
    45deg,
    WhiteSmoke,
    WhiteSmoke 10px,
    aquamarine 10px,
    aquamarine 20px
  );
  color: black;
  border-top: .5rem solid hotpink;
}
.inner {
  padding: 2rem;
  background: WhiteSmoke;
  box-shadow: .5rem .5rem 0 0 hotpink;
}
              
            
!

JS

              
                
              
            
!
999px

Console