CSS元素垂直水平居中实现及其原理

最新推荐文章于 2024-04-28 07:07:21 发布

yanwuhc

最新推荐文章于 2024-04-28 07:07:21 发布

阅读量394

点赞数

分类专栏： css 文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_44303404/article/details/120277623

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

CSS实现元素水平垂直居中的方式有多种，在这里分析一下这些实现方式的原理，做一个简单的总结。

1.利用`position:absolute`完成居中布局。

原理：

在css中，当元素设置了position:absolute，元素在视图中的水平定位满足如下约束：

left + margin-left + border-left + padding-left + content-width + padding-right + border-right + margin-right + right = 包含块元素的宽度（content-width）

这个叫做元素在水平方向定位的过渡约束。

如果上面9个值中没有auto，则自动调整right的值以使等式成立。
如果有auto，则自动调整auto的值以使等式成立。

其中，可以设置auto的值有5个：

left margin-left content-width margin-right right

同样的，在垂直方向上，元素的定位也满足过渡约束：

top + margin-top + border-top + padding-top + content-height + padding-bottom + border-bottom + margin-bottom + bottom = 包含块元素的高度（content-height）

注意：left、right、top、bottom这四个值默认都是auto，如果不对这四个值进行设置，那么浏览器将会优先调整这个四个属性的值来满足过渡约束。

因此，根据这两个过渡约束条件，如果我们要设置元素水平、垂直方向都居中，可以：

将left、right、top、bottom设置为0；
将margin四个方向设置为auto。

实例代码如下：

<!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>position设置元素居中</title>
    <style>
        .box1{
            border: 1px solid red;
            height: 400px;
            width: 800px;
            position: relative;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: pink;
            
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;

        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

效果：

2.利用`position:relative`结合`transform:translate()`完成居中布局

原理：

当元素设置了相对定位，top和botttom如果设置百分比，则相对于父元素的height属性来确定距离；同理，如果left和right设置百分比，则根据父元素的width属性来确定距离。

因此，如果对子元素设置了：

position: relative;
top: 50%；
left: 50%;

那么元素将偏离重心，子元素所在盒子的左上角将指向父元素的中心：

因此，可以借用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>position设置元素居中</title>
    <style>
        .box1{
            border: 1px solid red;
            height: 400px;
            width: 800px;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: pink;
            
            position: relative;
            top: 50%;
            left: 50%;
            /* 调整位置 */
            transform: translate(-50%,-50%);

        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

效果：

3.利用flex布局

原理：

根据flex布局的相关特点，很快能实现垂直居中布局。

实例代码：

<!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>position设置元素居中</title>
    <style>
        .box1{
            border: 1px solid red;
            height: 400px;
            width: 800px;

            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

效果：

4.利用table布局实现垂直水平居中

原理：

将父元素设置成display: table-cell，子元素将被看成单元格td来处理。此时，可以设置vertical-align：middle来使元素垂直居中。同时，借用margin: 0 auto来设置垂直居中。

实例代码：

<!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>position设置元素居中</title>
    <style>
        .box1{
            border: 1px solid red;
            height: 400px;
            width: 800px;
            /* 实现垂直居中 */
            display: table-cell;
            vertical-align: middle;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 实现水平居中 */
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

效果：

yanwuhc

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
CSS元素垂直水平居中实现及其原理

CSS实现元素水平垂直居中的方式有多种，在这里分析一下这些实现方式的原理，做一个简单的总结。1.利用position:absolute完成居中布局。原理：在css中，当元素设置了position:absolute，元素在视图中的水平定位满足如下约束：left + margin-left + border-left + padding-left + content-width + padding-right + border-right + margin-right + right = 包含块元素的宽
复制链接

扫一扫