Text* Snippets: css code

Here's how to center anything vertically and horizontally in a web page using CSS. Works with most all browsers that support CSS.

I adapted this from Jak psåt web, thanks! <http://www.jakpsatweb.cz/css/css-vertical-center-solution.html>

<html>
        <head>
                <title>Center w/ CSS</title>
                <style type="text/css" media="screen">
                        body, html { height:  100%; }
                        #outer { height: 100%; width: 100%; overflow:  visible; position: relative; }
                        #outer[id] { display: table; position: static; }
                        #middle { position: absolute; top: 50%; }
                        #middle[id] { display: table-cell; vertical-align: middle; position: static; }
                        #inner { position:  relative; top: -50%; text-align: center; }
                        #inner[id] { position: static; text-align: center; }
                </style>
        </head>
        <body>
                <div id="outer">
                        <div id="middle">
                                <div id="inner">
                                        your stuff here in center of page
                                </div>
                        </div>
                </div>
        </body>
</html>

Related Tags

danb's Tags

Never been to TextSnippets before?

About this user

Center something vert. and horz. in a web page using CSS