详解html的几种水平垂直居中的方式（基础）

前言

我们在编写马过程中，想必大家对水平垂直居中的方法了解并不多。所以我给大家总结式的列出几种常用的水平垂直居中的方法。

第一种方法

!--htML盒子代码-->
    !--水平垂直居中-->
    div class="centered1">
        p>
    d第一种/p>
    /div>
    !-css样式部分-->
   .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;
        }
    

第二种方法

!--html盒子代码-->
    !--水平垂直居中-->
    div class="Centered2">
        p>
    d第二种/p>
    /div>
    !-css样式部分-->
/*第二种方法水平垂直居中*/    .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;
        }
    

第三种方法

!--html盒子代码-->
    !--水平垂直居中-->
    div class="Centered3">
        p>
    d第三种/p>
    /div>
    !-css样式部分-->
/*第三种方法水平垂直居中*/    .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%);
        }
        

第四种方法

!--html盒子代码-->
    !--水平垂直居中-->
    div class="Centered4">
        p>
    d第四种/p>
    /div>
    !-css样式部分-->
/*第四种方法水平垂直居中,老版本flex布局*/    .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;
        }
    

第五种方法

!--html盒子代码-->
    !--水平垂直居中-->
    div class="Centered5">
        p>
    d第五种/p>
    /div>
    !-css样式部分-->
/*第五种方法水平垂直居中,新版本的flex水平垂直居中*/    .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;
        }
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！