元素居中的方式

我真的有在摸鱼

已于 2022-03-02 14:15:06 修改

阅读量347

点赞数

文章标签： css3 css html

于 2022-03-01 20:01:11 首次发布

本文链接：https://blog.csdn.net/m0_54332406/article/details/123213844

版权

效果图

1.定位实现一（推荐使用）

将父元素设为position:relative,子元素设为position:absolute，然后上下左右都设为0，外边距自动。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            /* 相对定位 */
            position: relative;
        }

        .box p{
            width: 100px;
            height: 100px;
            background-color: red;
            /* 绝对定位 */
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
</head>

<body>
    <div class="box">
        <p></p>
    </div>
</body>

</html>

2.定位实现二

将子元素走父元素的50%，子元素外边距走子元素的一半（只能用px，百分比无法实现，因为百分比是将子元素大小改变，不是移动）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            position: relative;
        }

        .box p{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 50%;
            top:50%;
            /* 比较麻烦，必须要知道子元素的一半,而且不能使用百分比，不然就不能到中间的位置 */
            margin-top: -50px;
            margin-left: -50px;
        }
    </style>
</head>
<body>
    <div class="box">
        <p></p>
    </div>
</body>
</html>

3.弹性盒（flexbox）

一般会在移动端布局上使用

将父元素设为弹性盒，然后通过水平居中，垂直居中的方法实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
             /* 变成容器 */
             display: flex;
            /* 主轴方向居中(默认为水平方向) */
            justify-content: center;
            /* 交叉轴方向居中(永远与主轴方向垂直) */
            align-items: center;
        }
        p{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <!-- 子项目 -->
        <p></p>
    </div>
</body>
</html>

紫色区域代表使用的是弹性盒布局

4.子标签设为行内元素

父元素用text-align：center；让子元素水平居中，line-height是将子元素放到中间位。将子元素设为行内元素display: inline-block; 让元素垂直居中vertical-align：middle;（一般是文字垂直居中）

注意：在子元素的后面要加span标签让它找到中心点，span标签里不需要写任何内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            text-align: center;
            line-height: 300px;
            
        }

        .small{
            width: 100px;
            height: 100px;
            background: red;
            display: inline-block;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="small"></div><span></span>
    </div>
</body>
</html>

5.使用transform平移

注意：transform: translate();是相对于自身来进行平移的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <style>
        .box{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            
        }

        .small{
            width: 100px;
            height: 100px;
            background-color: red;
            /* 平移自身的全部 */
            transform: translate(100%,100%);
        }
    </style>

</head>
<body>
    <div class="box">
        <div class="small"></div>
    </div>
</body>
</html>

6.网格布局（grid）

将父元素变成网格，给中间区间命名，改变中间区域的背景颜色

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            display: grid;
            grid-template-rows: repeat(3,100px);
            grid-template-columns: repeat(3,100px);
            /* 注意：要在命名的区间之间加空格 */
            grid-template-areas: ". . ." ". a ." ". . .";

        }

        .small {
            width: 100px;
            height: 100px;
            grid-area: a;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="small"></div>
    </div>
</body>

</html>

7.网格在容器内的对齐方式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            /* 网格布局 */
            display: grid;
            /* 创建一个一行一列的网格 */
            grid-template-rows: 100px;
            grid-template-columns: 100px;
            /* 将网格放在中间 */
            /* 注意：place-content: 垂直方向 水平方向;*/
            place-content: center center;
        }

        span {
            background-color: red;
        }
    </style>

</head>

<body>
    <div class="box">
        <span></span>
    </div>
</body>

</html>