Detailed explanation of several horizontal and vertical centering methods in HTML (Basics)

Preface

When we were writing the horse, I guess everyone didn't know much about the methods of horizontal and vertical centering. So I will summarize for you several commonly used methods of horizontal and vertical centering.

First method

<!--html box code-->
<!--Horizontal and vertical center-->

<div class="Centered1">
    <p>dThe first type</p>
</div>

<!-css style part-->
   .Centered1{
            background-color: #800070;
            width: 100%;
            height:500px;
            position: relative;
        }
    .Centered1 p{
            width: 200px;
            height: 200px;
            background-color: deeppink;
            line-height: 200px;
            text-align: center;
            position: absolute;
            left: 0;
            bottom: 0;
            right:0;
            top: 0;
            margin: auto;
        }

Second method

<!--html box code-->
<!--Horizontal and vertical center-->

<div class="Centered2">
    <p>dThe second type</p>
</div>

<!-css style part-->
/*The second method is horizontal and vertical centering*/
    .Centered2{
            background-color: #ef8518;
            width: 100%;
            height: 500px;
            position: relative;
        }
    .Centered2 p {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color:red;
            line-height: 200px;
            text-align: center;
            left: 50%;
            top:50%;
            margin-left:-100px;
            margin-top: -100px;
        }

The third method

<!--html box code-->
<!--Horizontal and vertical center-->

<div class="Centered3">
    <p>dThe third type</p>
</div>

<!-css style part-->
/*The third method is horizontal and vertical centering*/
    .Centered3{
            background-color: dimgrey;
            width: 100%;
            height: 500px;
            position: relative;
        }
    .Centered3 p {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color:darkorange;
            line-height: 200px;
            text-align: center;
            left: 50%;
            top: 50%;
            transform:translate(-50%,-50%);
        }

The fourth method

<!--html box code-->
<!--Horizontal and vertical center-->

<div class="Centered4">
    <p>dThe fourth type</p>
</div>

<!-css style part-->
/*The fourth method is horizontal and vertical centering, old version flex layout*/
    .Centered4{
            background-color: #FF4444;
            width: 100%;
            height: 500px;
            display: -webkit-box;
            -webkit-box-pack:center;
            -webkit-box-align: center;
        }
    .Centered4 p {
            width: 200px;
            height: 200px;
            background-color:cadetblue;
            line-height: 200px;
            text-align: center;
        }

The fifth method

<!--html box code-->
<!--Horizontal and vertical center-->

<div class="Centered5">
    <p>d Fifth type</p>
</div>

<!-css style part-->
/*The fifth method is to center horizontally and vertically. The new version of flex is to center horizontally and vertically*/
    .Centered5{
            background-color: darkslateblue;
            width: 100%;
            height: 500px;
            display: flex;
            justify-content:center;
            align-items: center;
        }
    .Centered5 p {
            width: 200px;
            height: 200px;
            background-color:fuchsia;
            line-height: 200px;
            text-align: center;
        }

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: Analysis of the cause of docker error Exited (1) 4 minutes ago

>>: In-depth explanation of Mysql deadlock viewing and deadlock removal