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

布局技巧精粹

最新推荐文章于 2023-09-30 13:11:25 发布

原创最新推荐文章于 2023-09-30 13:11:25 发布 · 272 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

4 篇文章

订阅专栏

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

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>