Question

我有一个带有一些div标签的html页面，我想将容器div 放在电脑屏幕的中央，无论是放大还是缩小。

我想以www.bing.com的方式修改我的html页面。缩小时，主页在屏幕上居中，而在缩放时，我的网页会不断扩展。

我的HTML网页代码：

 <html>
      <head>
        <title>
          HTML test page
        </title>
        <style>
          .horizontal{
        width:100%;
        height:100px;
        background-color: #bbb;
          }
          .vertical{
        width:100px;
        height:70%;
        background-color: #bbb;
          }
          #container{
        margin:auto;
        width:100%;
        height:100%;
          }
        </style>
      </head>
      <body>
        <div id="container">
        <div class="horizontal">
        </div>
        <div class="vertical" style="float:left;">
        </div>
        <div class="vertical" style="float:right;">
        </div>
        <div class="horizontal" style="float:left;" >     
        </div>
        <h1 style="font-size:3em; color:Green; text-align:center;">
             HTML Test page
        </h1>
        </div>
      </body>
    </html>

如何调整我的CSS代码以便我可以实现与（www.bing.com）相同的集中页面样式？我想按下Ctrl + -

来集中我的容器div

Answer 1

我只是检查bing.com。看来他们用JS改变了居中div的位置和大小。它在页面加载时居中，并在页面重新调整大小时相同。并且不要忘记 #container 的绝对位置。

<script>
$(window).resize(function() {
    doResize();
}

$(document).ready(function(){
    doResize();
}

function doResize() {  
    var windowHeight = $(window).height();
    $('#container').css('top',(windowHeight - $('#container').height())/2);
}

</script>

Answer 2

它与您使用百分比而不是像素或EMs

有关

我得到它以便它保持居中但我仍然坚持浏览器的顶部。

<html>
  <head>
    <title>
      HTML test page
    </title>
    <style>
      .horizontal{
    width:100%;
    height:100px;
    background-color: #bbb;
      }
      .vertical{
    width:100px;
    height:250px;
    background-color: #bbb;
      }
      #container{
    margin:auto auto;
    width:750px;
    height:400px;
      }
    </style>
  </head>
  <body>
    <div id="container">
    <div class="horizontal">
    </div>
    <div class="vertical" style="float:left;">
    </div>
    <div class="vertical" style="float:right;">
    </div>
    <div class="horizontal" style="float:left;" >     
    </div>
    <h1 style="font-size:3em; color:Green; text-align:center;">
         HTML Test page
    </h1>
    </div>
  </body>
</html>

修改 可能性 您可以使用MediaQuery并设置top:###px，以便页面的其余部分与中心设置。但你可能需要创建几个CSS文件或编写大量的CSS代码才能使其正常工作

Answer to css get height of screen resolution

此答案中有一个链接到媒体查询，将您带到w3.org Media Queries site

Answer 3

在查看了您刚刚推荐我们的那个页面后，我相信这就是您可能想要的内容

    <html>
      <head>
        <title>
            HTML test page
        </title>
        <style>
body {
    width: 100%;
    height: 100%;
    margin:auto;
}
#container {
    vertical-align: middle;
    margin:auto;
    height:100%;
    width:100%;
    display: table;
}
span {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
    font-size:5em;
    color:#fff;
}
#inner {
    margin:auto;
    width:50%;
    height:auto;
    border:100px solid #bbb;
    color:Green;}
        </style>
      </head>
      <body>
    <body>
        <div id="container">
        <div class="horizontal">
            </div>
            <div class="vertical" style="float:left;">
            </div>
            <div class="vertical" style="float:right;">
            </div>
            <div class="horizontal" style="float:left;" >     
            </div>
            <span><div id="inner">HTML Test page</div>
            </span>
        </div>
    </body>
      </body>
    </html>

这将为您的div创建一个100px大小的边框，该边框根据需要在中心对齐

如何在html页面中居中div标记而不受缩放的影响

3 个答案: