如何将一个div水平垂直居中

div绝对定位水平垂直居中：margin:auto

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

div绝对定位水平垂直居中：margin 负间距

div{
　　width:100px;
　　height: 100px;
　　position: absolute;
　　left:50%;
　　top:50%;
　　margin-left:-50px;
　　margin-top:-50px;
}

div绝对定位水平垂直居中：Transforms 变形

div{
　　width: 100px;
　　height: 100px;
　　position:absolute;
　　left:50%;
　　top:50%;
　　transform: translate(-50%,-50%); 
}

弹性盒模型-css不定宽高水平垂直居中

.box{
　　height:100px;
　　display:flex;
　　justify-content:center;
　　align-items:center;
}

.box{
　　 display: -webkit-box;
 　　-webkit-box-pack: center;
 　　-webkit-box-align: center;
}

对子盒子实现绝对定位，利用calc计算位置

.calc{
  position: relative;
}
.calc .box{
  position: absolute;
  left:-webkit-calc((100px - 50px)/2);
  top:-webkit-calc((100px - 50px)/2);
  left:-moz-calc((100px - 50px)/2);
  top:-moz-calc((100px - 50px)/2);
  left:calc((100px - 50px)/2);
  top:calc((100px - 50px)/2);
}

将父盒子设置为table-cell元素，可以使用text-align:center和vertical-align:middle实现水平、垂直居中

.box{
  display: table;
}
.box > div{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.box > div > div{
  display: inline-block;
}

来源：https://www.cnblogs.com/happy-8090/p/11855250.html

标签

垂直居中

div居中

div