Absolute Horizontal And Vertical Centering In CSS

HTML Part

<html>
<head>
<style>...</style>
</head>
<body>   
    <div class="Parent-Container"> <!--this div is optional-->
      <p class="Absolute-Center">This is a paragraph</p>
    </div>
</body>
</html>

CSS Part

    <style>
        body{
            height:100%;
        }
      
        .Center-Container {
            position: relative; /*Position must be relative if it contains an absolute positioned element*/
            background-color: green;
            height: 300px; /*height is also required*/
        }

        .Absolute-Center {
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            height:200px;width:400px; /*Height-Width must be declared*/
            background-color:red;
        }
    </style>

JsFiddle, CodePen, For more

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s