纯CSS实现div垂直水平居中 - Flex布局方法

"纯CSS实现div垂直水平居中 - Flex布局方法"\n\n使用Flex布局轻松实现div垂直水平居中，只需几行CSS代码。本文介绍如何使用Flex属性 "justify-content" 和 "align-items" 来实现居中效果，并提供完整的代码示例和HTML结构。\n\ncss\n.container {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n}\n\n.centered-div {\n /* 样式属性 */\n}\n\n\n这里，.container 是包含div的容器，它使用 display: flex; 来启用Flex布局。然后使用 justify-content: center; 和 align-items: center; 将div水平和垂直居中。最后，通过设置容器的高度为100vh（视口的高度），可以使div在页面中垂直居中。\n\n在HTML中，可以这样使用：\n\nhtml\n<div class="container">\n <div class="centered-div">\n <!-- 内容 -->\n </div>\n</div>\n\n\n将你想要垂直水平居中的内容放在 centered-div 中即可。