水平居中和垂直居中常用方法总结

最新推荐文章于 2025-07-02 15:54:47 发布

Alisane

最新推荐文章于 2025-07-02 15:54:47 发布

阅读量9.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS HTML 文章标签： css

本文链接：https://blog.youkuaiyun.com/wsymcxy/article/details/82389779

CSS 同时被 2 个专栏收录

18 篇文章

订阅专栏

HTML

9 篇文章

订阅专栏

本文介绍了使用CSS实现网页元素水平及垂直居中的多种方法，包括利用行级元素特性、margin属性、display属性、flex布局以及绝对定位等技术手段。

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

水平居中

行级元素：为该行级元素的父元素设置text-align:center样式

<div style="width: 500px;height: 100px;border: 1px solid green;text-align:center;">
    <span>行级元素</span>
</div>

块级元素：为其自身设置margin:auto样式

<div style="width: 500px;height: 100px;border: 1px solid red;">
    <div style="margin:auto;width: 100px;height: 100px;border: 1px solid gold">块级元素</div>
</div>

代码执行结果图

垂直居中

1.display:table;此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符.

display:table-cell;此元素会作为一个表格单元格显示（类似 <td> 和 <th>）

<div style="display: table;width: 500px;height: 200px;border: 1px solid red;">
    <div style="display: table-cell;vertical-align: middle;text-align:center;">块级元素</div>
</div>

代码执行结果

2. 利用flex布局使内部块级元素水平，垂直居中

display:flex;justify-content: center; align-items:center;

<div style="display:flex;justify-content: center; align-items:center; width: 500px;height: 200px;border: 1px solid green;text-align:center;line-height:100px ">
    <div style="width: 100px;height: 100px;border: 1px solid gold">块级元素</div>
</div>

代码执行结果 [点击并拖拽以移动]

3.利用定位实现

父元素：position:relative;

子元素：position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);

<div style="position:relative; width: 500px;height: 200px;border: 1px solid red;">
    <div style="position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);width: 100px;height: 100px;border: 1px solid gold;text-align:center;line-height:100px">块级元素</div>
</div>

代码执行结果