Div 内容垂直居中：Flexbox 和绝对定位方法 - 详细指南

```json {"title":"Div 内容垂直居中：Flexbox 和绝对定位方法 - 详细指南","description":"学习两种简单易懂的方法，使用 Flexbox 或绝对定位和 Transform 属性将 Div 内的内容垂直居中。附带示例代码和解释，让你轻松实现页面布局。","keywords":"div 垂直居中, 内容居中, flexbox, 绝对定位, transform, css, 布局, 页面设计, 网站开发","content":"要实现 div 内的内容垂直居中，可以使用以下方法之一：\n\n方法一：使用 flexbox 布局\n\nHTML 代码：\n\nhtml\n<div class="container">\n <div class="content">\n 内容\n </div>\n</div>\n\n\nCSS 代码：\n\ncss\n.container {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh; /* 或者设置一个固定的高度 */\n}\n\n.content {\n /* 添加其他样式 */\n}\n\n\n方法二：使用绝对定位和 transform 属性\n\nHTML 代码：\n\nhtml\n<div class="container">\n <div class="content">\n 内容\n </div>\n</div>\n\n\nCSS 代码：\n\ncss\n.container {\n position: relative;\n height: 100vh; /* 或者设置一个固定的高度 */\n}\n\n.content {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n /* 添加其他样式 */\n}\n\n\n这两种方法都可以实现 div 内的内容垂直居中，选择其中一种适用于你的情况即可。\n\n注意：\n* 为了确保内容垂直居中，请确保父容器（.container）具有一个明确的高度。\n* 您可以根据需要调整示例代码中的类名和内容。\n* 除了垂直居中，您还可以使用 Flexbox 和绝对定位来控制内容的水平居中。\n 更多相关资源：\n* Flexbox 文档\n* 绝对定位文档\n* Transform 属性文档\n 希望这些信息对您有所帮助！\n 相关搜索：\n* css div 内容居中\n* div 垂直居中 flexbox\n* div 垂直居中 绝对定位\n* css 布局技巧\n 相关主题：\n* CSS 布局\n* 网站设计\n* 页面开发\n 版权声明：\n本文档仅供学习参考，未经授权请勿转载或用于商业用途。\n 联系我们：\n如果您有任何问题或建议，请随时与我们联系。 ``&#x60