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

              
                .container
  h1 Vertically Centering in CSS
  
  p.p--large It is <span id="year"></span>, but guess what, vertically centering stuff on the web is still hard. Below are a few common techniques for vertically centering HTML elements and hopefully you'll be able to add one or two to your CSS toolbelt.

  blockquote.twitter-tweet(data-lang="en")
    p(lang="en" dir="ltr") 44 years ago we put a man on the moon, yet we still can’t vertically centre things in CSS.</p>&mdash; James Anderson (@jsa) <a href="https://twitter.com/jsa/status/358603820516917249">July 20, 2013</a>
  script(async, src="//platform.twitter.com/widgets.js" charset="utf-8")

  // ========================================
  // Example A
  // ======================================== 
  
  h2 A. display: inline-block
  p <strong>When to use:</strong> When you want two or more elements that sit side-by-side to be vertically centered in relation to eachother.
  p <strong>Limitations:</strong> Cannot work if you only have a single element. The heights of each element are based on the content they hold (this may or may not be what you're looking for).
  .example
    .a-blocks
      .a-block 
        .item A small amount of content
      .a-block
        .item Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure veniam reprehenderit quam molestiae similique dolorum repellat debitis rem ut maiores fuga, saepe quisquam corporis, sit incidunt mollitia doloremque quod optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus totam iure adipisci quod officiis consequatur. Repudiandae est eaque fugit debitis. Veniam officia libero provident debitis dolor eius dignissimos minus unde!
      .a-block
        .item This is an example of a medium amount of content. The text in this div might take-up several lines. It is larger than the smallest element on this row.
  
  // ========================================
  // Example B
  // ======================================== 
  
  h2 B. display: table-cell
  p <strong>When to use:</strong> When you need multiple elemnts to be vertically aligned within a row but you need the height of each to be determined by the height of the tallest individual item.
  p <strong>Limitations:</strong> display: table-cell can be a bit strange if you're not used to working with tables. Some properties can behave a bit strangley like margin and position: absolute.
  .example
    .b-table
      .b-cell.item A small amount of content.
      .b-cell.item Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni consequatur ea debitis dolores odio non! Illum consectetur reiciendis aspernatur facilis. Quia sint laborum provident placeat minima dicta, fuga suscipit quod!
  
  // ========================================
  // Example C
  // ======================================== 
  
  h2 C. position: absolute (w/ translate)
  p <strong>When to use:</strong> When the height of the parent element is not based on the height of its children. This usually means the parent has a fixed or percentage-based height.
  p <strong>Limitations:</strong> The height of the vertically centered element cannot be used to drive the height of its parent.
  .example
    .c-outer
      .c-inner.item Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta quaerat, delectus quidem aut, veniam dolore et culpa omnis possimus, ab, incidunt quia fuga. Perspiciatis quae odio, ea consectetur porro non!
      
  // ========================================
  // Example D
  // ======================================== 
  
  h2 D. position: absolute (w/ negative margins)
  p <strong>When to use:</strong> When you need to support IE8 or older.
  p <strong>Limitations:</strong> Requires you to have a set width/height on the element being centered.
  .example
    .d-outer
      .d-inner.item Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta quaerat, delectus quidem aut, veniam dolore et culpa omnis possimus, ab, incidunt quia fuga. Perspiciatis quae odio, ea consectetur porro non!
      
  // ========================================
  // Example E
  // ======================================== 
  
  h2 E. line-height
  p <strong>When to use:</strong> When you're trying to vertically align a single line of text within an element that has a set height.
  p <strong>Limitations:</strong> Cannot work when the element has a flexible height. Does not work when more than one line of text is needed. Perhaps consider using display: table-cell instead if these are requirements.
  .example
    .e-element Look ma, I'm centered!
    
  // ========================================
  // Example F
  // ======================================== 
  
  h2 F. display: flex
  p <strong>When to use:</strong> When you're trying to vertically align an element within a fixed-height parent.
  p <strong>Limitations:</strong> Flexbox needs to be support by the browsers you're targeting.
  .example
    .f-flex 
      .item Look ma, I'm centered!
      
  // ========================================
  // Example G
  // ======================================== 
  
  h2 G. pseudo display: inline-block
  p <strong>When to use:</strong> When you for some reason cannot set the height on the parent directly but still require a fix height element with a centered child.
  p <strong>Limitations:</strong> Limited use cases, most likely one of the other methods would be more straightforward to implement.
  .example
    .g-pseudo 
      .item Look ma, I'm centered!
      
  // ========================================
  // Example H
  // ========================================
  
  h2 H. padding
  p <strong>When to use:</strong> When you need the content to drive the parent's height rather than relying on a fixed-height parent.
  p <strong>Limitations:</strong> Potentially might not play nicely with sibling elements.
  .example
    .h-padding 
      .item Look ma, I'm centered!
      
  // ========================================
  // Final Thoughts
  // ========================================
  
  h2 Wrapping Up
  p These are just some of the many ways to vertically center elements with CSS. The one that is the best fit for you is going to depend on the specific needs of your situation. For even more info on vertically centering things with CSS check out <a href="https://css-tricks.com/centering-css-complete-guide/">this CSS Tricks article</a>.
              
            
!

CSS

              
                
// ========================================
// Global Styles
// ========================================

*, *:before, *:after
  box-sizing: border-box
  
body
  margin: 60px
  padding: 0
  color: white
  background: #292a2b
  line-height: 1.6em
  
.twitter-tweet
  margin: 40px auto !important
  
.p--large
  font-size: 20px
  margin-bottom: 50px
  
h1
  color: #2884cc
  margin-bottom: 20px
  
h2
  padding-bottom: 8px
  color: #49a9cb
  border-bottom: 1px solid rgba(#bbb, 0.2)
  
a
  color: #49a9cb
  
.container
  max-width: 800px
  margin: 0 auto
  
.example
  background: rgba(black, 0.2)
  padding: 20px
  border-radius: 3px
  margin-top: 30px
  margin-bottom: 80px
  box-shadow: inset 0 0 10px rgba(black, 0.15)
  
.item
  background: #ffe66d
  padding: 15px
  font-size: 12px
  line-height: 20px
  color: black  
  
// ========================================
// Example A
// ========================================  
  
.a-blocks
  font-size: 0
  margin-left: -10px
  
.a-block
  font-size: 16px
  display: inline-block
  vertical-align: middle
  width: 33.33%
  padding-left: 10px
  
// ========================================
// Example B
// ========================================
  
.b-table
  display: table
  
.b-cell
  display: table-cell
  vertical-align: middle
  width: 50%
  
// ========================================
// Example C
// ========================================  
  
.c-outer
  position: relative
  height: 300px
  
.c-inner
  position: absolute
  top: 50%
  left: 50%
  transform: translate(-50%, -50%)
  
// ========================================
// Example D
// ========================================  
  
.d-outer
  position: relative
  height: 300px
  
.d-inner
  position: absolute
  top: 50%
  left: 50%
  width: 380px
  height: 110px
  margin-top: -55px
  margin-left: -190px
  
// ========================================
// Example E
// ========================================

.e-element
  height: 200px
  line-height: 200px
  text-align: center
  white-space: nowrap
  
// ========================================
// Example F
// ========================================

.f-flex
  display: flex
  justify-content: center
  flex-direction: column
  height: 200px
  text-align: center
  
// ========================================
// Example G
// ========================================

.g-pseudo
  text-align: center
  .item
    display: inline-block
  &:before
    content: ''
    display: inline-block
    height: 200px
    width: 5px
    background: #49a9cb
    vertical-align: middle
    
// ========================================
// Example H
// ========================================

.h-padding
  padding: 100px 0
  text-align: center
  .item
    display: inline-block
              
            
!

JS

              
                var year = new Date().getFullYear()
$('#year').text(year)
              
            
!
999px

Console