CSS水平垂直居中10种方法详解：从兼容性到移动端

本文档是一篇关于CSS水平和垂直居中的全面教程，针对不同场景提供了10种常见的布局解决方案。在面试或实际工作中，理解和掌握这些技巧将非常有用。主要内容分为以下几个部分： 1. **PC端兼容性要求** - 当子元素宽高固定时，推荐使用`absolute`定位配合负`margin`来实现居中，如`.parent`元素通过`margin: 0 auto`使其水平居中，但需注意`display: table-cell`情况下，`margin: 0 auto`可能失效。 - 对于宽高不定的子元素，可以利用`absolute`与`transform`结合，例如设置`transform: translateX(-50%) translateY(-50%)`，确保元素居于父元素中心。 2. **PC端无兼容性需求** - 在兼容性较好的情况下，推荐使用`flexbox`布局，如`.parent`设置`display: flex; justify-content: center; align-items: center;`，自动将内部元素水平和垂直居中。 3. **移动端布局** - 移动端优先选择`flexbox`，同样设置`.parent`为`display: flex`，以适应响应式设计，使子元素在不同设备上都能轻松居中。 4. **具体的实现示例** - 文档提供了一个基础模板，包含一个`.parent`容器和`.child`子元素，展示如何使用CSS样式实现居中。`.parent`使用`margin: 0 auto`和`box-sizing: border-box`，`.child`则设置`text-align: center`和`line-height`来实现文本垂直居中。 5. **其他布局技巧** - 介绍两种特殊情况： - 对于文本垂直居中的情况，除了`line-height`外，还可以使用`vertical-align`属性，如`.child1`设置`display: inline-block`和`vertical-align: middle`。 - 如果有多个块级元素需要垂直居中，可以设置父元素的高度和`line-height`相同，并使用`vertical-align`对齐每个子元素。 总结来说，本文档是一份详细的CSS居中技术指南，适合开发者在实际项目中遇到各种布局需求时参考和应用。熟练掌握这些方法，将有助于提升网页布局的灵活性和兼容性。