HTML 居中显示 - 使用 Flexbox 实现
以下是一个使用 Flexbox 实现 HTML 内容居中的示例代码:
<!DOCTYPE html>
<html>
<head>
<title>居中示例</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>
</head>
<body>
<div class='container'>
<h1>这是一个居中表示的示例</h1>
</div>
</body>
</html>
这个示例使用了 CSS 的 flex 布局,通过设置容器的'display' 属性为'flex',并且设置'justify-content' 和'align-items' 属性为'center',就可以让内容在容器里居中显示。同时,通过设置容器的高度为'100vh',可以使其占满整个视口的高度。在容器里添加一个标题'
' 元素,就可以看到它已经被居中显示在页面中央。
原文地址: https://www.cveoy.top/t/topic/ngW7 著作权归作者所有。请勿转载和采集!