How to add a text at the center of HTML page



So many times I need to make an element, for example an image element, that appears exactly at the center of an HTML page.

I did it, and here I share the code:

<!DOCTYPE html>
    <html>
        <head>
            
            <title>I am on the center</title>
            <meta charset="utf-8">
            <meta http-equiv="Pragma" content="no-cache" />
            <meta http-equiv="Expires" content="0" />
            <meta http-equiv="x-ua-compatible" content="ie=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
            
            <style>
                body, html{
                    height: 100%;
                    padding: 0px;
                    margin: 0px;
                }
            </style>
        </head>
        <body style="display: table; width: 100%;">
            <div style="display: table-row;">
                <div style="text-align: center; display: table-cell; vertical-align: middle;">
                    <p>I am on the center</p>
                </div>
            </div>
        </body>
    </head>
</html>
loading...

Leave a Reply

Your email address will not be published. Required fields are marked *