DIV居中

在 HTML 中让 div 居中可以通过多种方式实现，具体取决于你想要实现的是水平居中、垂直居中还是两者都居中。以下是几种常用方法：

 

1. 水平居中（适用于块级元素）

 

html

预览

<div style="width: 300px; margin: 0 auto; background: #f0f0f0;">
  这个div水平居中
</div>

 

1. 水平和垂直都居中（使用 flexbox，推荐）

 

html

预览

<div style="display: flex; justify-content: center; align-items: center; height: 100vh;">
  <div style="width: 300px; height: 200px; background: #f0f0f0;">
    这个div在父容器中完全居中
  </div>
</div>

 

1. 使用绝对定位实现居中

 

html

预览

<div style="position: relative; height: 100vh;">
  <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 200px; background: #f0f0f0;">
    这个div完全居中
  </div>
</div>

 

1. 使用 grid 布局实现居中

 

html

预览

<div style="display: grid; place-items: center; height: 100vh;">
  <div style="width: 300px; height: 200px; background: #f0f0f0;">
    这个div完全居中
  </div>
</div>

 

 

这些方法各有适用场景：

 

• 简单的水平居中推荐使用 margin: 0 auto
• 现代网页开发中，推荐使用 Flexbox 或 Grid 布局，它们更灵活且易于实现各种居中需求
• 绝对定位适合需要精确控制元素位置的场景