垂直水平居中的方法

//宽高未知
//第一种定位

.box { background-color: #ccc; width: 300px; height: 300px; position: relative; } .content { background-color: #999999; width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; tranfrom: trsanstate(-50%,-50%); } //第二种 伸缩盒子 //宽高未知

.box { background-color: red; width: 300px; height: 300px; display: flex; justify-content: center; align-items: center; } content { background-color: #F00; width: 100px; height: 100px; } //未知宽高 //tabll

.box { background-color: orange; width: 300px; height: 300px; display: table; } .content { background-color: #F00; display: table-cell; vertical-align:middle; 垂直居中 text-align" center; 水平居中 } .inner { background-color: #000; display: inline-block; }