css3实现任意元素居中

最新推荐文章于 2023-11-01 17:56:27 发布

rufeike

最新推荐文章于 2023-11-01 17:56:27 发布

阅读量429

点赞数

分类专栏：前端小案例文章标签： css3 transform translate移动

本文链接：https://blog.csdn.net/rufeike/article/details/102682407

版权

前端小案例专栏收录该内容

9 篇文章 2 订阅

订阅专栏

css3实现任意元素居中

实现效果

在这里插入图片描述

实现方式

方式一：position定位和margin边距实现，该方式受定位元素大小影响，不同宽高的元素，需要计算margin的值。
方式二：position定位+transform:translate(-50%,-50%)移动实现，推荐使用，无需考虑定位元素的宽和高

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{position:relative;height: 200px;background-color: #cccccc;margin-bottom: 15px;}
        .circle{width:100px;height:100px;background-color: skyblue;border-radius: 50px}
        .circle1{position:absolute;top:50%;left:50%;margin-top:-50px;margin-left:-50px;}
        .circle2{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
    </style>
</head>
<body>
    <p>方式一：position定位和margin边距实现</p>
    <div class="container">
        <div class="circle circle1"></div>
    </div>
    <p>方式二：position定位+transform:translate(-50%,-50%)移动实现</p>
    <div class="container">
        <div class="circle circle2"></div>
    </div>
</body>
</body>
</body>
</html>

rufeike

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3实现任意元素居中

css3实现任意元素居中实现效果实现方式方式一：position定位和margin边距实现，该方式受定位元素大小影响，不同宽高的元素，需要计算margin的值。方式二：position定位+transform:translate(-50%,-50%)移动实现，推荐使用，无需考虑定位元素的宽和高代码实现<!DOCTYPE html><html lang="en"...
复制链接

扫一扫