当前位置：首页 > news >正文

HTML5 中实现盒子水平垂直居中的方法

news 来源：原创 2025/5/13 6:43:07

在 HTML5 中，有几种方法可以让一个定位的盒子在父容器中水平垂直居中。以下是几种常用的方法：

使用 Flexbox 布局

<div class="parent"><div class="child">居中内容</div>
</div><style>.parent {display: flex;justify-content: center;  /* 水平居中 */align-items: center;      /* 垂直居中 */height: 100vh;            /* 设置父容器高度 */}.child {/* 子元素不需要特殊样式 */}
</style>

使用 Grid 布局

<div class="parent"><div class="child">居中内容</div>
</div><style>.parent {display: grid;place-items: center;  /* 水平和垂直居中 */height: 100vh;}
</style>

使用绝对定位 + transform

<div class="parent"><div class="child">居中内容</div>
</div><style>.parent {position: relative;height: 100vh;}.child {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
</style>

使用绝对定位 + margin auto

<div class="parent"><div class="child">居中内容</div>
</div><style>.parent {position: relative;height: 100vh;}.child {position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;width: fit-content;  /* 或者指定宽度 */height: fit-content; /* 或者指定高度 */}
</style>

使用表格布局（传统方法）

<div class="parent"><div class="child">居中内容</div>
</div><style>.parent {display: table;width: 100%;height: 100vh;}.child {display: table-cell;text-align: center;  /* 水平居中 */vertical-align: middle;  /* 垂直居中 */}
</style>

现代 Web 开发中，推荐优先使用 Flexbox 或 Grid 布局方法，它们更简洁、灵活且易于维护。