Horizontální i vertikální vycentrování v CSS

Určitě jste si někdy lámali hlavu s tím jak na stránkách vycentrovat nějaký prvek a to nejen horizontálně ale i vertikálně a ještě navíc aby to fungovalo ve všech webových prohlížečích. Skvělé a hlavně funkční řešení pomocí flexboxu jsem nalezl na těchto stránkách.

Samotný CSS kód

Vše obstará níže uvedený CSS kód:

html {
   height: 100%;
}

body {
   display: -webkit-box;   /* OLD: Safari,  iOS, Android browser, older WebKit browsers.  */
   display: -moz-box;      /* OLD: Firefox (buggy) */
   display: -ms-flexbox;   /* MID: IE 10 */
   display: -webkit-flex;  /* NEW, Chrome 21–28, Safari 6.1+ */
   display: flex;          /* NEW: IE11, Chrome 29+, Opera 12.1+, Firefox 22+ */

   -webkit-box-align: center; -moz-box-align: center; /* OLD… */
   -ms-flex-align: center; /* You know the drill now… */
   -webkit-align-items: center;
   align-items: center;

   -webkit-box-pack: center; -moz-box-pack: center;
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;

   margin: 0;
   height: 100%;
   width: 100% /* needed for Firefox */
}

Jak to vypadá v praxi můžete vidět např. na mé profilové stránkce zde.

Publikováno 3.2.2015 v 15:22 | Kategorie: CSS