Sayfada <div> merkezi bir öğe için en iyi şekilde yatay ve dikey olarak?

margin-left: auto; margin-right: auto; yatay ama dikey olarak da yapmanın en iyi yolu nedir? merkezi olacak biliyorum

En iyi ve en esnek şekilde

* *Benim 10

Bu demo ana hile elemanları yukarıdan aşağıya doğru gidiyor normal akışı içinde, margin-top: auto sıfıra ayarlanır. Ancak, konumlandırılmış öğe boş alan için aynı dağıtım davranır ve aynı şekilde dikey olarak top bottom belirtilen (7) merkezli olabilir.

Bu hile div herhangi boyutları ile çalışır.

HTML:

<div></div>

CSS:

div {
    width: 100px;
    height: 100px;
    background-color: red;

    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;

    margin: auto;
}