SCSS: Center/Middle-aligned Content Box

// a border-box mixin // (which I assume everyone has in their partials?) @mixin bbox { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } // variables $cmbox-default-bg-color: #ccc; $cmbox-default-padding: 4rem; // the holder .cmbox { @include bbox; width: 100%; display: table; padding: $cmbox-default-padding; text-align: center; background-color: $cmbox-default-bg-color; } // the content .cmbox__content { margin: 0; padding: 0; display: table-cell; vertical-align: middle; } // etc .cmbox__title { margin: 0; padding: 0; } /* markup <div class="cmbox"> <div class="cmbox__content"> <h1 class="cmbox__title">Hello world!</h1> </div> </div> */
Not exactly the most modern implementation of a middle-aligned, center-aligned content box. But it's a rather simple and useful solution to a huge short-coming of CSS. I still use it often.

1 Response

Awesome! Thanks for this Greg.

Write a comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.