不定宽高div,实现水平垂直居中

不定宽高div,实现水平垂直居中

第一种方式: css

/* 父元素 */
display: table-cell;  /*让标签元素以表格单元格的形式呈现，类似于td标签*/
text-align: center;
vertical-align: middle;

/* 子元素 */
display: inline-block;
/* vertical-align: middle; */

第二种方式:定位

/* 父元素 */
position: relative;
/* 子元素 */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)

第三种方式:伸缩

/* 父元素 */
display: flex;
justify-content: center;
align-items: center;