如何垂直和horizo​​ntallly中心的div？ [英] How to centre a div vertically and horizontallly?

问题描述

我有一个div，我想要定位在页面的中心（垂直和水平）。

为了水平居中，我使用

查看代码：

>

CSS：

  .vcenter {
 height：50px; 
 width：50px; 
 background：red; 
 vertical-align：middle; 
 margin-top：calc（50％ -  25px）; 
} 
  

HTML：

 < center> 
< div class =vcenter> 
 
< / div> 
< center> 
  

此外，我不认为在div周围使用中心标签来居中对象是最好的方法

我想知道的是

• 如何


• 是否有更好的方法将div水平放置，而不是使用中心

  如果可以的话，使用 mozilla.org/en/docs/Web/CSS/flexrel =nofollow> flex 是最简单的。将这些样式应用到您要将 div 中心的容器中：

    display：flex; 
   align-items：center; 
   justify-content：center; 
    

  
  

  I have a div that I want to position at the center of a page(both vertically and horizontally).

  For centring it horizontally I used the center tags around the div and for vertically centring it is tried a couple of things but none of them actually working.

  Check out the code:

  CSS:

  .vcenter{
    height: 50px;
    width: 50px;
    background: red;
    vertical-align: middle;
    margin-top: calc(50% - 25px);
  }
  

  HTML :

  <center>
      <div class="vcenter">
  
      </div>
  <center>
  

  Also I don't think using centre tags around the the div to centre an object is the best way to so it.

  What I want to know is

  • How can I centre the div both vertically and horizontally no matter what the size of the screen is ?
  • Is there a better way to centre the div horizontally rather than using the center tags ?

  解决方案

  If available, using flex is the easiest. Apply these styles to the container in which you want to center your div:

  display: flex;
  align-items: center;
  justify-content: center;
  

  这篇关于如何垂直和horizo​​ntallly中心的div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！