css实现水平垂直居中的几种方式

最新推荐文章于 2025-06-09 22:31:27 发布

原创最新推荐文章于 2025-06-09 22:31:27 发布 · 258 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

4 篇文章

订阅专栏

本文深入探讨了多种网页布局方法，包括绝对定位与相对定位、table布局、flex布局、transform及grid布局，通过实例代码展示了如何使用这些技术创建美观且响应式的网页设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 使用绝对定位与相对定位

2. table布局方式

3. flex布局(1)

4. flex布局(2)

5. transform

6. grid布局

<html>
<head>
<title>我的第一个 HTML 页面</title>
</head>

<body>
<div class="box">
  <div class="box1"></div>
</div>
</body>
</html>

<style>
.box {
    width: 300px;
    height: 200px;
    background: red;
    display: flex;
}
.box1 {
    width: 100px;
    height: 50px;
    background: yellow;
    margin: auto;
}
</style>