如何将元素置于浏览器窗口中间？

要做到这一点,您需要知道您居中的元素的大小.任何测量都可以(即px,em,百分比),但它必须具有固定的大小.

css将如下所示:

 // Replace X and Y with a number and u with a unit. do calculations
 // and remove parens
.centered_div {
   width: Xu;
   height: Yu;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-left: -(X/2)u;
   margin-top: -(Y/2)u;
}

编辑:此中心位于视口中.您只能使用JavaScript在浏览器窗口中居中.但无论如何,这可能还不错,因为你可能想要显示一个弹出/模态框？

div#wrapper {
    position: absolute;
    top:  50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

这完全可以用CSS - 不需要JavaScript: 这是一个例子

以下是该示例背后的源代码:

  

  




    

        

        This text is

        DEAD CENTRE

        and stays there!
    


    view construction

我很惊讶没有人说位置=固定.从7开始,它完全符合我在所有"人类"浏览器和IE中的要求和工作.

这是:

HTML + CSS唯一解决方案 - 无需JavaScript

它不要求您事先知道内容大小

内容以窗口大小调整为中心

这个例子:

    
        

        
    

    
        

        



This content will be centered.


        
        
    

请查看原始网址以获取完整信息:http: //krustev.net/html_center_content.html

您可以使用此代码执行任何操作.唯一的条件是任何派生的作品必须具有对原作者的引用.

如果您不知道浏览器的大小,可以使用以下代码简单地居中于CSS:

HTML代码:

Some Text
  

CSS代码:

 .firstDiv {
  width: 500px;

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  background-color: #F1F1F1;
 }

这也有助于未来任何不可预见的变化.

这适用于任何div尺寸或屏幕尺寸：

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}

 
 
 
 
 

 I'm in the center