已知高度使用用传统的绝对定位-margin高度的一半方法,这里不多介绍。
未知高度常用的三种方法:
1.表格 cell-table方法
.parent1{ display: table; background-color: #FD0C70; } .parent1 .child{ display: table-cell; vertical-align: middle; }
2. 决定定位 transform:translate(-50%;-50%)
.parent2{ position: relative; } .parent2 .child{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
3.弹性布局 flex
.parent3{ display: flex; justify-content: center; align-items: center; }