让一个div水平且垂直居中

Posted 2020-09-21 困就滚去睡

水平且垂直居中分为三种情况：

 

1、一个浏览器页面中，只有一个div模块，让其上下左右居中：

div{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: 0;
}

 

2、一个父元素div，一个已知宽度、高度的子元素div(100*200)：

/*子div样式*/
{
  position: absolute/fixed;
  left: 50%;
  top: 50%;
  margin-left: -50px;
  margin-top: -100px;
}

 

3、一个父元素div，一个未知宽度、高度的子元素div：

/*三种解决方法*/

/*a、position 布局，
　　position设为absolute，其他同  情况1 
 */


/*b、display属性设为table*/
    //父级元素
    {
      display: table;
    }
    //子元素
    {    
      display: table-cell;
      vertical-align: middle;
    }

/*c、flex布局*/
    //父级元素
    {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
    //子元素
    {
      flex: 1;
    }