css怎么让元素垂直居中 |bootstrap docs.css

方法一：使用Flexbox布局

父元素：
display: flex;
justify-content: center;
align-items: center;

方法二：将元素作为table-cell

父元素：
display: table;
子元素：
display: table-cell;
vertical-align: middle;

方法三：使用position和transform

父元素：
position: relative;
子元素：
position: absolute;
top: 50%;
transform: translateY(-50%);

方法四：使用line-height

父元素设置：
height: 100px;
line-height: 100px;
子元素：
vertical-align: middle;

以上方法都是比较常用的，可以根据实际情况选择合适的方法来实现元素的垂直居中。