html
<div class="outer"> ????<div class="inner"></div></div>
基本样式
.outer { ???background: #ddd; ???width: 500px; ???height: 500px;}.inner { ??width: 100px; ??height: 100px; ??background: red;}一、宽高不固定
1.display: flex
.outer { ???????display: flex; ???????align-items: center; ???????justify-content: center; }2.absolute + transform
.outer { ???????position: relative; } .inner { ???????position: absolute; ???????top: 50%; ???????left: 50%; ???????transform: translate(-50%, -50%); }3.absolute + margin: auto
.outer { ???????position: relative}.inner { ???????position: absolute; ???????top: 0; ???????left: 0; ???????bottom: 0; ???????right: 0; ???????margin: auto;}4.display: table-cell
.outer { ???????display: table-cell; ???????vertical-align: middle;}.inner { ???????margin: auto;}二、宽高固定
1.text-align + display: inline-block + vertical-align: middle
.outer { ???????text-align: center;}.outer::after { ???????content: ‘‘; ???????display: inline-block; ???????vertical-align: middle; ???????height: 500px;}.inner { ???????vertical-align: middle; ???????display: inline-block;}2.absolute + top + left + margin-top + margin-left
.outer { ???????position: relative;}.inner { ???????position: absolute; ???????top: 50%; ???????left: 50%; ???????margin-top: -50px; ???????margin-left: -50px;}参考：https://github.com/louzhedong/blog/issues/2
css 实现垂直水平居中常用方法
原文地址：https://www.cnblogs.com/bear-blogs/p/10263493.html