Demo This div is centered. HTML <header> <div id=”logo”></div> </header> CSS header { width: 100%; min-hight: 200px; position: relative; } header #logo { position: absolute; left: 0; right: 0; margin: 0 auto; }
Demo This div is vertically centered. CSS .demo-container:before { content: “”; display: inline-block; height: 100%; vertical-align: middle; } .demo-container { background-color: #CCC; display: table; min-height: 100px; width: 100%; } .demo-element { background-color: #BBB; display: inline-block; } HTML <div class=”demo-container”> <div class=”demo-element”>This div is vertically centered.</div> </div>
Gradients are (mostly) created with the background-image CSS property.
A cheat-sheet with reminders, references and examples for working with CSS and SASS.