css - 在屏幕上居中 div,在 IE11 上不起作用,但在 Firefox 上可以

标签 css asp.net

使用 css,我试图将 div Wrapper 置于屏幕中央。它适用于 Mozilla,但不适用于 IE 11。我不知道为什么。我的网页在 Windows Server 2008 中运行。

CSS

div#wrapper 
    {      
     width: 1250px;  
     min-width:1250px;
     max-width:1250px;     
     position: absolute;          
     top: 0;
     left: 0;
     right: 0;          
     bottom:0;                  
     margin-left: auto;
     margin-right: auto;
     margin: auto;
     border: 2px solid red;  

    }

aspx:

<head runat="server">
    <title></title>
    <link href="Styles/Site.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <div id="wrapper">
         HELLO
         <br />
         <asp:Button ID="Button1" runat="server" Text="Button" />
    </div>

    </form>
</body>

Mozilla 中的网页图像。如您所见,div 在屏幕上居中: enter image description here

IE11 中的网页图像。如您所见,div 不在屏幕中心:

enter image description here

最佳答案

试试这个:

body
{
    width:100%;
    height: 100%;
}

div#wrapper 
{      
    width: 1250px;  
    min-width: 1250px;
    max-width: 1250px;     
    position: absolute;          
    top:0;
    bottom:0;
    left: calc(50% - 625px);    
    border: 2px solid red;  
}

编辑:我已经对其进行了测试,它可以在 IE11 中运行。

解释一下代码:它会将您的 div 放置在 body 标签内 body 宽度的 50% 减去 625px(div 宽度的一半),该宽度是浏览器宽度的 100%。

关于css - 在屏幕上居中 div,在 IE11 上不起作用,但在 Firefox 上可以,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32791715/

相关文章:

c# - 发送 HTTP header 后服务器无法修改 cookie,如何修复?

javascript - 将固定位置放在相对位置时如何工作

asp.net - UpdatePanel 实际上是如何工作的?

c# - 基于浏览器的在线游戏问题

css - 如何将 CSS 网格子元素对齐到网格顶部

javascript - 如何以及在何处安全地存储访问 token

jquery - 如何使用 JQuery 将文件上传到 MVC VNext 网络服务器?

html - IE 11 上的 Flexbox row-reverse 打破了 align-items

javascript - 如何制作点击链接但不导航到该链接的按钮

javascript - 如何在javascript中向上键的文本字段中的两位数字后添加点?