使用flex布局实现一个简单的文字在页面居中效果
warning:
这篇文章距离上次修改已过443天，其中的内容可能已经有所变动。
以下是使用Flex布局实现文字在页面居中的简单代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex 居中示例</title>
<style>
.centered-text {
display: flex; /* 启用Flex布局 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100vh; /* 高度设置为视口高度 */
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="centered-text">
文字内容居中
</div>
</body>
</html>这段代码会创建一个全屏的div容器，并使用Flex布局将其中的文字水平和垂直居中。
评论已关闭