css垂直两端对齐样式 |商品 css

/* 方法一：使用display:flex */
.parent {
display: flex;
justify-content: space-between;
align-items: center;
}
/* 方法二：使用vertical-align */
.parent {
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
}
/* 方法三：使用line-height */
.parent {
height: 200px;
line-height: 200px;
}
.child {
display: inline-block;
vertical-align: middle;
}
/* 方法四：使用position */
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

以上四种方法各有优缺点，具体使用可根据实际情况选择。希望本文对您有所帮助。