css文本、盒子、浮动居中方法总结

(一)文本居中

<body>
   <div>
       <p>这是文本居中</p>
   </div>
</body>

1、文本水平居中:

text-align: center;

2、文本垂直居中:

line-height: "容器高度";

3、代码、截图:

div{
    width: 300px;
    height: 200px;
    background-color: red;
    /* 文本水平居中 */
    text-align: center;
    /* 文本垂直居中 */
    line-height: 200px;
}

在这里插入图片描述

(二)盒子居中

<body> 
   <div id="parent">
       <p>这是父盒子</p>   
        <div id="son">
            <p>这是子盒子</p>
        </div>  
   </div>
</body>

1、margin水平居中:

自动调整左右的外边距margin来实现水平居中,当然需要注意的是子盒子是有宽度的

#parent{
    width: 600px;
    height: 400px;
    background-color: blue;
}
#son{
    width: 300px;
    height: 200px;
    background-color: red;
    /* 盒子水平居中 */
    margin: 0 auto;
}

2、相对定位、绝对定位、margin垂直水平居中:

1、首先父盒子要先相对定位,然后子盒子再绝对定位,如果父盒子不相对定位,那么子盒子的绝对定位就会脱离父盒子定位;
2、子盒子的绝对定位是以左上角为原点移动的,所以left: 50%top: 50% 只是根据左上角为原点来居中的,而没有使子盒子中心整体居中;
3、所以需要分别缩小外边距margin-leftmargin-top到子盒子宽度和高度的一半,也就相当于原点移动到了子盒子正中心;

#parent{
    width: 600px;
    height: 400px;
    background-color: blue;
    /* 父盒子相对定位 */
    position: relative;
}
#son{
    width: 300px;
    height: 200px;
    background-color: red;
     /* 子盒子绝对定位*/
     position: absolute;
     /* 水平居中 */
     left: 50%;
     margin-left: -150px;/* -(子盒子宽度)/2 */
     /* 垂直居中 */
     top: 50%;
     margin-top: -100px;/* -(子盒子高度)/2 */
}

3、相对定位、绝对定位、transform垂直水平居中:

定位和方法2一样, 而translate(-50%,-50%) 作用是,往上(x轴),左(y轴)移动自身长宽的 50%,以使其居于中心位置。

#parent{
    width: 600px;
    height: 400px;
    background-color: blue;
    /* 父盒子相对定位 */
    position: relative;
}
#son{
    width: 300px;
    height: 200px;
    background-color: red;
     /* 子盒子绝对定位*/
     position: absolute;
     /* 水平垂直居中 */
     left: 50%;
     top: 50%;     
     transform: translate(-50%,-50%);
}

4、flex垂直水平居中:

1、这种办法是使父元素内的子元素横向排列,然后分别水平和垂直居中
2、需要注意的是如果父盒子内有多个元素,那么将根据这多个元素横向排列的总宽度来居中,其中心位于总宽度的一半

#parent{
    width: 600px;
    height: 400px;
    background-color: blue;
    /* 父盒子内元素横向排列 */
    display: flex;
    /* 水平居中 */
    justify-content: center;
    /* 垂直居中 */
    align-items: center;
}
#son{
    width: 300px;
    height: 200px;
    background-color: red;
}

在这里插入图片描述

1、如果想要垂直排列,我们可以加上 flex-direction: column;
2、当然,其居中原理是根据多个垂直排列元素的总高度来居中的,其中心位于总高度的一半

#parent{
	    width: 600px;
        height: 400px;
        background-color: blue;
        /* 父盒子内元素横向排列 */
        display: flex;
        /* 垂直排列方向 */
        flex-direction: column;
        /* 水平居中 */
        justify-content: center;
        /* 垂直居中 */
        align-items: center;
    }
#son{
        width: 300px;
        height: 200px;
        background-color: red;
    }

在这里插入图片描述

(三)浮动居中

。。。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小-黯

免费的,尽力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值