在项目中遇到一个弹出框组件,组件宽度固定,但高度是不固定的,想要它居于整个屏幕中间,看似简单的一个设计,但没想到在垂直居中这一块遇到了很大的麻烦,最后经多方查找比较,得到了一个比较合适的方案
.radio_selector ul {
width: 20rem;
background-color: #fff;
position: absolute;
top: 50%;
left: 0;
right: 0;
margin: auto;
border-radius: 1rem;
transform: translateY(-50%);
overflow: hidden;
}
其中关键代码是:
position: absolute;
top: 50%;
transform: translateY(-50%);