Živá ukázka

Výsledek

<div class="centrovany-obal">
    <div class="centrovany">
        <h1>Obsah s neznámou výškou i šířkou</h1>
        <h2>centrovaný na střed vodorovně i svisle</h2>
        <p>Řešení využívá pseudo-elementu <code>:before</code></p>
    </div>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, delectus asperiores reprehenderit aspernatur aliquam sint rerum possimus quis adipisci nostrum.</p>
<p>Ipsa, culpa molestiae quia laborum est quasi aliquam repudiandae dolores et autem sunt libero facilis quis. Quidem rem amet earum.</p>
<p>Quo, officiis, repudiandae, fugiat asperiores distinctio perferendis architecto nemo laudantium id itaque reprehenderit praesentium quas. Nobis quas porro atque nemo!</p>
<p>Harum, dicta placeat nihil iure consectetur optio error expedita quaerat obcaecati est. Dolores, adipisci, illo officia modi ipsum veritatis dolorem?</p>
<p>Minima, est a optio quisquam non obcaecati odio nesciunt aliquam laboriosam placeat dicta ipsum veritatis reprehenderit quod cumque commodi ipsam.</p>
<p>Magni, consectetur, praesentium, velit, maxime deleniti ducimus fugit consequatur neque ullam iste adipisci amet inventore in quos recusandae eaque id!</p>
<p>Consectetur, quas, corporis a doloribus unde laborum ipsum nesciunt. Pariatur dolorum in nobis incidunt illo commodi rem cumque sit! Id.</p>
<p>Assumenda, tempore fugit perspiciatis voluptatem vero minus iusto ducimus nisi modi odio numquam dolorem illum expedita quos libero quia tempora.</p>
<p>Qui, ratione, adipisci, maxime, odit quos eligendi ex fugiat earum cum animi obcaecati reprehenderit ipsum aliquid voluptates commodi eos iure!</p>
<p>Similique, fuga, nam, ab, reprehenderit quis id saepe ullam perferendis voluptatem at cumque consequatur soluta nemo facilis maiores alias enim.</p>
<p>Magni, consectetur, praesentium, velit, maxime deleniti ducimus fugit consequatur neque ullam iste adipisci amet inventore in quos recusandae eaque id!</p>
<p>Consectetur, quas, corporis a doloribus unde laborum ipsum nesciunt. Pariatur dolorum in nobis incidunt illo commodi rem cumque sit! Id.</p>
<p>Assumenda, tempore fugit perspiciatis voluptatem vero minus iusto ducimus nisi modi odio numquam dolorem illum expedita quos libero quia tempora.</p>
<p>Qui, ratione, adipisci, maxime, odit quos eligendi ex fugiat earum cum animi obcaecati reprehenderit ipsum aliquid voluptates commodi eos iure!</p>
<p>Similique, fuga, nam, ab, reprehenderit quis id saepe ullam perferendis voluptatem at cumque consequatur soluta nemo facilis maiores alias enim.</p>

HTML

Autoformát
Standardní režim
Mobilní zobrazení

CSS

Autoformát
CSS reset
Až na konci

JS

Autoformát
jQuery
Umístění JS