css垂直居中方式总结

最新推荐文章于 2024-03-19 00:15:00 发布

huzhenv5

最新推荐文章于 2024-03-19 00:15:00 发布

阅读量160

点赞数

分类专栏： HTML CSS 文章标签： css 垂直居中总结

本文链接：https://blog.csdn.net/huzhenv5/article/details/105019243

版权

CSS 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

HTML

6 篇文章 1 订阅

订阅专栏

文章目录

通过relative定位
- 实例
- 兼容性
通过absolute定位
- 实例
- 兼容性
通过flex布局（1）
- 实例
- 兼容性
通过flex布局（2）
- 实例
- 兼容性

通过relative定位

这种方法的思路是，使用relative将元素相对父元素下移50%，在通过transform使元素相对自身上移50%，这样元素就处在父元素的正中间了，示意图：

在这里插入图片描述

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>change-to-flex</title>
    <style>
        body {
            margin: 0;
        }
        .border {
            height: 100px;
            width: 100px;
            border: 2px solid blue; 
            display: inline-block;        
        }
        .item {
            width: 40px;
            height: 40px;
            background-color: red;
            position: relative;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
    <div class="border">
        <div class=item></div>
    </div>
    
</body>
</html>

运行：
在这里插入图片描述

注意：

通过这种方式垂直居中，父元素的高度必须是确定的，因为top:50%是通过父元素的高度计算的（如果left:50%就不会要求父元素的宽度确定，查资料说因为block的元素的宽默认是父元素的100%）
还有一个容易被忽视的就是：父元素的display不能是table、contents、inline

兼容性

这种方式需要用到css3的transform 2d转换，兼容性见下图：
在这里插入图片描述

通过absolute定位

通过absolute的思路是，将要垂直居中的元素的position设置为absolute，然后将它的top和bottom均设置为0，再设置它的margin-top和margin-bottom为auto，则它会上下垂直居中，我们通常用这个思路来实现水平居中，其实它也是可以实现垂直居中的

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>change-to-flex</title>
    <style>
        body {
            margin: 0;
        }
        .border {
            width: 100px;
            height: 100px;
            border: 2px solid blue; 
            position: relative    
        }
        .item {
            width: 40px;
            height: 40px;
            background-color: red;
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto 0;
        }
    </style>
</head>
<body>
    <div class="border">
        <div class=item></div>
    </div>
    
</body>
</html>

运行：
在这里插入图片描述

兼容性

position是css很早就有的一个属性，兼容性无疑是十分好的（position为sticky的兼容性不是十分好）

注意：

注意要将需要垂直的居中元素的父元素的position设置为relative，使得abolute的相对对象为父元素

通过flex布局（1）

思路很简单，通过flex布局的特性配合margin实现

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>change-to-flex</title>
    <style>
        body {
            margin: 0;
        }
        .border {
            width: 100px;
            height: 100px;
            border: 2px solid blue; 
            display: flex;   
        }
        .item {
            width: 40px;
            height: 40px;
            background-color: red;
            margin: auto 0;
        }
    </style>
</head>
<body>
    <div class="border">
        <div class=item></div>
    </div>
    
</body>
</html>

运行：
在这里插入图片描述

兼容性

使用flex布局，需要考虑到flex的兼容性问题：
在这里插入图片描述

通过flex布局（2）

这种方式也是利用flex布局，不同上面的是，它配合flex自带的交叉轴居中属性align-items: center来实现垂直居中

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>change-to-flex</title>
    <style>
        body {
            margin: 0;
        }
        .border {
            width: 100px;
            height: 100px;
            border: 2px solid blue; 
            display: flex;   
            align-items: center;
        }
        .item {
            width: 40px;
            height: 40px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="border">
        <div class=item></div>
    </div>
    
</body>
</html>

运行：
在这里插入图片描述

兼容性

同上

huzhenv5

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css垂直居中方式总结

文章目录通过relative通过relative这种方法的思路是，使用relative将元素相对父元素下移50%，在通过transform使元素相对自身上移50%，这样元素就处在父元素的正中间了，示意图：实例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...
复制链接

扫一扫