已知或者未知宽度的垂直水平居中方式

.wrapper { position: relative; .box { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin: -50px 0 0 -50px; } }

.wrapper { position: relative; .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } }

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

.wrapper { display: table; .box { display: table-cell; text-align: center; vertical-align: middle; } }