Tag Archives: HTML

#microtip – Center a div horizontally and vertically

A small tip that can be handy say when you are creating a landing HTML page. The goal is to position or align a div in the centre of the browser. There are many misleading and non working example when you google this, so pasting a simple solution that works.


<div class="outer-container">
 <div class="inner-container">
 <h3>Hello Center!</h3>


.outer-container {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;

.inner-container {
 position: relative;
 top: 40%;

JsFiddle: http://jsfiddle.net/31L9jdsz/