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

最新推荐文章于 2023-11-27 11:09:04 发布

小-黯

最新推荐文章于 2023-11-27 11:09:04 发布

阅读量3.6k

点赞数 3

分类专栏： H5/CSS/JS 文章标签：定位 css html 居中

我不能死我还要学习！(>_<)

本文链接：https://blog.csdn.net/qq_44625774/article/details/106785800

版权

H5/CSS/JS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

（一）文本居中

<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-left和margin-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;
    }