如何让一个div居于页面正中间

最新推荐文章于 2024-04-24 09:27:42 发布

土豆程序媛

最新推荐文章于 2024-04-24 09:27:42 发布

阅读量3k

点赞数 2

文章标签： css3 html 前端

原文链接：https://www.cnblogs.com/gxsweb/p/5395243.html

版权

怎样让div居于页面正中间

简单的页面html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div居于页面正中间</title>
</head>
<body>
    <div class="center-in-center"></div>
</body>
</html>

CSS样式

方法1

<style type="text/css">
        *{
            margin: 0;
            padding: 0;
            background-color: #EAEAEA;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: #1E90FF;
        }
        .center-in-center{
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
    </style>

原文链接https://www.cnblogs.com/gxsweb/p/5395243.html

方法2

<style>
.center-in-center{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
}
</style>

原文链接https://www.cnblogs.com/gaotenglong/p/5701434.html
看到别的再总结，哈哈哈哈哈

土豆程序媛

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
如何让一个div居于页面正中间

让div居于屏幕正中间的方法1<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>div居于页面正中间</title> <style type="text/css"> *{ margin: 0; padding: 0; bac
复制链接

扫一扫