首页 > 代码库 > 让一个div水平且垂直居中

让一个div水平且垂直居中

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

 

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; }

 

让一个div水平且垂直居中