css 高度居中

### 使用 CSS 实现元素高度自适应并垂直居中 #### 方法一：Flexbox 布局 通过 `flex` 属性可以轻松实现子元素的高度自适应和垂直居中。 ```css .parent { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ height: 100vh; /* 设置父级容器高度为视窗高度 */ } .child { width: 50%; /* 子元素宽度可以根据需求调整 */ padding-top: 50%; /* 维持宽高相等的比例，适用于正方形 */ } ``` 这种方法利用了 Flexbox 的强大功能，在不指定具体尺寸的情况下让子元素自动适配，并保持在父容器中心位置[^4]。 #### 方法二：Grid 布局 CSS Grid 提供了一种更灵活的方式来创建复杂的布局结构，同样能够很好地处理元素的自适应性和居中问题。 ```css .parent { display: grid; place-items: center; /* 同时设置水平和垂直居中 */ min-height: 100vh; /* 至少占据整个屏幕高度 */ } .child { aspect-ratio: 1 / 1; /* 确保子元素始终保持正方形比例 */ background-color: lightblue; } ``` 此方案不仅实现了预期的效果，还具有良好的浏览器兼容性和支持更多样化的布局模式。 #### 方法三：绝对定位配合 transform 对于某些特定场景下的应用，也可以考虑采用传统的绝对定位方式加上 `transform` 来完成同样的任务。 ```css .parent { position: relative; height: 100vh; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20rem; height: auto; /* 高度随内容变化而改变 */ max-width: 90vw; /* 控制最大宽度不超过可视区域 */ } ``` 这种方式虽然较为传统，但在很多情况下依然非常有效，特别是在需要精确控制元素相对于其最近已定位祖先的位置时。