Skip to main content

Center a DIV with Pure CSS Easy Guide!

By

This tutorial explains how to Center a DIV with Pure CSS.

The DIV will be positioned in the page’s centre using this CSS snippet. The div is vertically and horizontally centred without the need of jQuery or JavaScript. Credit: RawCode.io

center div
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Center DIV</title>
    <style>
      body {
        background: #900;
      }

      div {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 40%;
        height: 50%;
        padding: 20px;
        background: red;
        color: white;
        text-align: center;
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
      }
    </style>
  </head>
  <body>
    <div>Center DIV</div>
  </body>
</html>


from thetechxp https://ift.tt/8hV6Zw0
via IFTTT
Labels:

Comments

Post a Comment