Vue.js 使用 Flex 布局实现 div 内元素垂直居中

可以使用flex布局将div里面的元素垂直居中。\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\n以上代码中，通过display: flex;将.container设置为flex容器。然后使用justify-content: center;实现内部元素的水平居中，使用align-items: center;实现内部元素的垂直居中。最后通过height: 100vh;设置容器的高度为视窗高度，确保容器占满整个屏幕。