第一种
- .father {
- display: table-cell;
- text-align: center;
- vertical-align: middle;
- }
- .child {
- display: inline-block;
- }
第二种
- .father {
- position: relative;
- }
- .child {
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- }
第三种
- .father {
- display: flex;
- justfy-content: center;
- align-items: center;
- }
来源: http://www.bubuko.com/infodetail-3163461.html