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>