css 百分比 垂直居中 |css input文本居中

首先，大家需要明确CSS百分比的工作原理。CSS百分比可以基于父元素的高度或宽度进行计算。

// 设置父元素高度为200px
.parent {
height: 200px;
}
// 子元素高度为父元素高度的50%
.child {
height: 50%;
}

从上面的示例可以看出，子元素的高度是相对于父元素的50%。为了实现垂直居中，大家需要将子元素的marginTop设置为父元素高度的一半减去子元素高度的一半。即：

.parent {
height: 200px;
display: flex; // 增加flex布局
justify-content: center; // 水平居中
align-items: center; // 垂直居中
}
.child {
height: 100px;
width: 100px;
}

在以上代码中，大家从父元素的display属性中增加了flex布局，justify-content属性用于水平居中，align-items属性用于垂直居中。因为大家使用了flex布局，所以子元素属性不再需要marginTop。

总结一下，使用CSS百分比垂直居中可以通过设置父元素的高度和子元素的高度百分比，组合使用flex布局进行水平居中和垂直居中来实现。同时，还需要注意保证子元素高度不超过父元素高度。