div网页居中

最新推荐文章于 2024-04-12 11:37:26 发布

30岁的程序梦

最新推荐文章于 2024-04-12 11:37:26 发布

阅读量546

点赞数 1

分类专栏：工作日志文章标签： CSS Javascript DIV居中 div样式

本文链接：https://blog.csdn.net/haohui2043/article/details/102744128

版权

工作日志专栏收录该内容

4 篇文章 1 订阅

订阅专栏

div样式网页居中

在开发中，有时候遇到需要将一个DIV放到网页的正中间，而自己的前端CSS基础，又不是很好，所以自己想着用博客的方式记录下来，以便忘记之后，可以来查询，废话不多说，直接上代码！

<body>
    <div class="main">
        <form th:action="@{/user/login}" method="post" class="form-class">
            <div>
                <h3>用户登入</h3>
            </div>
            <div class="item">
                <span>账号：</span> <input type="text" placeholder="请输入账号" name="name">
            </div>
            <div class="item">
                <span>密码：</span> <input type="password" placeholder="请输入密码" name="password">
            </div>
            <div class="item">
                <button type="submit">登入</button>
                <button type="reset">重置</button>
            </div>
        </form>
        <div class="msg" th:if="${msg !=null}">
            <h4 th:text="${msg}"></h4>
        </div>
    </div>
</body>

 <style>
        .main{
            text-align: center;
            background-color: cadetblue;
            color: #ffffff;
            width: 400px;
            height: 600px;
            margin: auto;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
     .form-class{
         margin-top: 160px;
     }
        .item{
            margin-top: 40px;
        }
        .msg{
            color: red;
            margin-top: 40px;
        }
    </style>

效果如图所示：
在这里插入图片描述

第一种方式

div使用绝对布局，设置margin:auto;并设置top、left、right、bottom的值相等即可，不一定要都是0。

.main{
    text-align: center; /*让div内部文字居中*/
    background-color: #fff;
    border-radius: 20px;
    width: 300px;
    height: 350px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

第二种方式：

仍然是绝对布局，让left和top都是50%，这在水平方向上让div的最左与屏幕的最左相距50%，垂直方向上一样，所以再用transform向左（上）平移它自己宽度（高度）的50%，也就达到居中效果了，效果图和上方相同。

.main{
    text-align: center;
    background-color: #fff;
    border-radius: 20px;
    width: 300px;
    height: 350px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

30岁的程序梦

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
div网页居中

div样式网页居中在开发中，有时候遇到需要将一个DIV放到网页的正中间，而自己的前端CSS基础，又不是很好，所以自己想着用博客的方式记录下来，以便忘记之后，可以来查询，废话不多说，直接上代码！<body> <div class="main"> <form th:action="@{/user/login}" method="post" cl...
复制链接

扫一扫