html+css 将<div>水平居中与垂直居中的几种办法

最新推荐文章于 2024-10-05 23:11:01 发布

Skander820

最新推荐文章于 2024-10-05 23:11:01 发布

阅读量739

点赞数 1

分类专栏： html+css

本文链接：https://blog.csdn.net/weixin_41939225/article/details/80201998

版权

html+css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

示例代码：

<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: red;
    }

    .inner {
        width: 100px;
        height: 100px;
        background-color: white;
    }
</style>
<body>
    <div class="box">
        <div class='inner'>
            居中
        </div>
    </div>
</body>

水平居中

1.<center>标签
最简单的方法，只需要在<div>外加上<center>就可以让<div>水平居中：
代码：

<body>
    <div class="box">
        <center>
            <div class='inner'>
                居中
            </div>
        </center>
    </div>
</body>

效果：
<center>标签水平居中
2.margin法
将<div>的 margin （外边距）属性设置成 “0 auto” 就可以居中
代码：

.inner {
    width: 100px;
    height: 100px;
    background-color: white;
    margin: 0 auto;
}

效果：
margin
3.绝对位置法
将<div>设置成绝对布局，然后用left或right移动<div>到中间,由于元素的坐标原点是左上角，所以为了居中，要移回半个<div>宽度的距离。
可以用margin-left:[1/2宽度]px或者transform: translate(-50%,0)实现
需要注意的是使用这种方法时，必须定义了位置布局方式。
代码：

.box {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: red;
}

.inner {

    width: 100px;
    height: 100px;
    background-color: white;
    position: absolute;
    left: 50%;
    margin-left: -50px;
}

效果：
绝对布局法

垂直居中

1.margin法
垂直居中也可以用margin实现，同样需要声明布局方式。
代码：

.box {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: red;
}

.inner {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: white;
    margin: auto;
    top: 0;
    bottom: 0;
}

效果：
margin垂直居中
2.绝对位置法
和水平居中一样把left改为top即可
代码:

.box {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: red;
}

.inner {
    width: 100px;
    height: 100px;
    background-color: white;
    position: absolute;
    top: 50%;
    margin-top: -50px;
}

效果:
绝对位置垂直居中

同时居中

1.margin法
只需margin:auto; , 然后top、 left 、right 、bottom 设置为相同值即可
代码:

.box {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: red;
}

.inner {
    width: 100px;
    height: 100px;
    background-color: white;
    position: absolute;
    margin: auto;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
}

效果：
margin 同时居中
2.绝对位置法
将水平居中垂直居中同时使用即可。
代码:

.box {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: red;
}

.inner {
    width: 100px;
    height: 100px;
    background-color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}