垂直居中
单行内联(inline-)元素垂直居中 通过设置内联元素的高度(height)和行高(line-height)相等,从而使元素垂直居中。 .text_div{ height: 120px; line-height: 120px; }
利用表布局 .father { display: table; } .children { display: table-cell; vertical-align: middle; text-align: center; }
flex布局 .center-flex { display: flex; flex-direction: column;//上下排列 justify-content: center; }
绝对布局方式 已知高度 .parent { position: relative; } .child { position: absolute; top: 50%; height: 100px; margin-top: -50px; } 未知高度 .parent { position: relative; } .child { position: absolute; top: 50%; transform: translateY(-50%); }
垂直水平居中根据上方结合 flex方式 .parent { display: flex; justify-content: center; align-items: center; } grid方式 .parent { height: 140px; display: grid; } .child { margin: auto; }