Para ello introduciremos el objeto a centrar en otro con propiedades display:table, el objeto a centrar tendrá el Display:table-cell.
Sigue el ejemplo
.ExternContainer{ top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; display: table; } .InternContainer{ display: table-cell; text-align: center; vertical-align: middle; }
Recurso: http://www.w3.org/Style/Examples/007/center-example
Método para centrar Listas Horizontalmente:
HTML: <div id="menu-outer"> <div class="table"> <ul id="horizontal-list"> <li><a href="#"><img src="images/list-item-1.gif" alt="list item 1" /></a></li> <li><a href="#"><img src="images/list-item-2.gif" alt="list item 2" /></a></li> <li><a href="#"><img src="images/list-item-3.gif" alt="list item 3" /></a></li> <li><a href="#"><img src="images/list-item-4.gif" alt="list item 4" /></a></li> </ul> </div> </div> CSS: #menu-outer { height: 84px; background: url(images/bar-bg.jpg) repeat-x; } .table { display: table; /* Allow the centering to work */ margin: 0 auto; } ul#horizontal-list { min-width: 696px; list-style: none; padding-top: 20px; } ul#horizontal-list li { display: inline; }
Recurso: https://css-tricks.com/centering-list-items-horizontally-slightly-trickier-than-you-might-think/