css-容器高度百分比（%），容器内的文字垂直居中
在Web开发中，如果你有一个容器（比如div），其高度是用百分比（%）设置的，容器内的文字能够垂直居中。
1.Flex
将父容器设置为Flex容器，并设置align-items属性为center即可。
<div class="container">
<p>我是垂直居中的文字</p>
</div>
<style>
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中，如果需要的话 */
height: 50%; /* 假设这是相对于某个父元素的高度 */
width: 100%; /* 示例宽度 */
/* 可能需要设置父容器的height为100%或其他具体值，以确保.container的高度计算有效 */
}
</style>2.Grid
将父容器设置grid容器， place-items: center; 同时实现垂直和水平居中。
<div class="container">
<p>我是垂直居中的文字</p>
</div>
<style>
.container {
display: grid;
place-items: center; /* 同时实现垂直和水平居中 */
height: 50%; /* 假设这是相对于某个父元素的高度 */
width: 100%; /* 示例宽度 */
/* 同上，可能需要设置父容器的height */
}
</style>3.垂直对齐
对于传统的布局方法，可以使用vertical-align属性，但这主要用于表格单元格（td、th）或行内元素（如span、img）。对于块级元素（如div），这个方法通常不起作用，除非你将display属性更改为table-cell或inline-block（但inline-block与vertical-align的组合在某些情况下可能不如Flexbox或Grid灵活或有效）。
4.定位
<div class="container">
<p class="centered-text">我是垂直居中的文字</p>
</div>
<style>
.container {
position: relative;
height: 50%; /* 假设的高度 */
width: 100%; /* 示例宽度 */
}
.centered-text {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%; /* 如果需要文本水平居中并占据整个容器宽度 */
text-align: center; /* 水平居中文字 */
}
</style>