个人中心
gpt4 book ai didi

html - div水平居中垂直居中

转载 作者：技术小花猫 更新时间：2023-10-29 12:14:07 25 4
gpt4 key购买 nike

<分区>

我想在页面的 body 水平居中和垂直居中对齐一个 div。

CSS:

.loginBody {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: #999; /* for non-css3 browsers */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #ccc,  #000); /* for firefox 3.6+ */
}
.loginDiv {
    position: absolute;
    left: 35%;
    top: 35%;
    text-align: center;        
    background-image: url('Images/loginBox.png');
    width:546px;
    height:265px;
}

我有这个 html:

<body class="loginBody">
    <form id="form1">
    <div class="loginDiv">

    </div>
    </form>
</body>

现在它的行为如我所愿，但如果我调整浏览器的大小，它就会完全变形，这可能是因为绝对定位。我正在展示一些截图:在调整大小的 Firefox 中: enter image description here

在调整大小的 chrome 中: enter image description here

在调整大小即: enter image description here

在最大化窗口中是: enter image description here

有什么办法可以解决这个问题，使用相对定位实现居中对齐？

谢谢。

编辑:

在 firefox 中，调整大小时不会出现滚动条，但在其他浏览器中会出现。 enter image description here

25 4 0
文章推荐： html - 如何不在特定标签上应用 CSS
文章推荐： linux - 使用 netcat 的 ssh 代理命令
文章推荐： linux - 来自 gcc 的 pgo 的优化报告
文章推荐： c - CLOCK_REALTIME CLOCK_MONOTONIC 中哪个时钟最适合计算开始时间结束时间
技术小花猫
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com