CSS【详解】居中对齐 （水平居中 vs 垂直居中）

朝阳392024-03-03 14:16

水平居中

内部块级元素的宽度要小于容器(父元素)

方案一：文本居中对齐（内联元素）

限制条件：仅用于内联元素 display:inline 和 display: inline-block;

给容器添加样式

css 复制代码 
text-align:center
html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        margin: 30px 30px 0px 300px;
        border: 1px solid gray;
        text-align: center;
      }
      .item {
        display: inline-block;
        width: 400px;
        background: yellow;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span>水平居中 -- display: inline</span>
    </div>
    <div class="box">
      <div class="item">水平居中 -- display: inline-block</div>
    </div>
  </body>
</html>

方案二：自动外边距（块级元素）

限制条件：仅用于块级元素 display:block;

给内部元素添加样式

css 复制代码 
margin: auto
html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        margin: 30px;
        border: 1px solid gray;
      }
      .item {
        margin: auto;
        width: 300px;
        background: yellow;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="item">水平居中 -- 块级元素 display:block</div>
    </div>
  </body>
</html>

方案三：flex布局【推荐】

给容器添加样式

css 复制代码 
display: flex;
justify-content: center;
html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        margin: 30px 30px 0px 300px;
        border: 1px solid gray;
        display: flex;
        justify-content: center;
      }
      .item {
        width: 400px;
        background: yellow;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span>水平居中 -- flex布局 display: inline</span>
    </div>
    <div class="box">
      <div class="item">水平居中 -- flex布局 display: block</div>
    </div>
  </body>
</html>

方案四：子绝父相 + transform （CSS3）

限制条件 ：浏览器需支持CSS3，比较老的浏览器不适用

给容器（父元素）添加样式

css 复制代码 
position: relative

给内部元素添加样式

css 复制代码 
position: absolute;
left: 50%;
transform: translate(-50%, 0);
html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        margin: 30px 30px 0px 300px;
        border: 1px solid gray;
        height: 50px;
        position: relative;
      }
      .item {
        background-color: yellow;
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span class="item">水平居中 -- 子绝父相 + transform</span>
    </div>
  </body>
</html>

方案五：子绝父相 + 自动外边距 （指定宽度）

限制条件：内部元素需限定宽度

给容器（父元素）添加样式

css 复制代码 
position: relative

给内部元素添加样式

css 复制代码 
position: absolute;
left: 0;
right: 0;
margin: auto;
html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        margin: 30px 30px 0px 300px;
        border: 1px solid gray;
        height: 50px;
        position: relative;
      }
      .item {
        background-color: yellow;
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        width: 300px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span class="item">水平居中 -- 子绝父相 + 自动外边距</span>
    </div>
  </body>
</html>

方案六：子绝父相 + 负外边距 （知道宽度 + 宽度计算）

限制条件：需知道内部元素的宽度（无法预知宽度的内联元素和未知宽度的块级元素都不适用）

给容器（父元素）添加样式

css 复制代码 
position: relative

给内部元素添加样式

css 复制代码 
position: absolute;
left:50%;
margin-left:-内部元素宽度的一半
html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        margin: 30px;
        border: 1px solid gray;
        height: 100px;
        position: relative;
      }
      .item {
        width: 400px;
        background: yellow;
        position: absolute;
        left: 50%;
        margin-left: -200px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="item">水平居中 -- 绝对定位元素 position:absolute</div>
    </div>
  </body>
</html>

垂直居中

内部块级元素的高度要小于容器(父元素)

方案一：行高 = 容器高度（单行内联元素）

限制条件：仅用于单行内联元素 display:inline 和 display: inline-block;

给容器添加样式

css 复制代码 
 height: 100px;
 line-height: 100px;
html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        margin: 30px;
        border: 1px solid gray;
        height: 100px;
        line-height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span class="item">垂直居中 -- 内联元素 display:inline</span>
    </div>
  </body>
</html>

方案二：flex布局【推荐】

给容器添加样式

css 复制代码 
display: flex;
align-items: center;

方案三：子绝父相 + transform（CSS3）

限制条件 ：浏览器需支持CSS3，比较老的浏览器不适用

给容器（父元素）添加样式

css 复制代码 
position: relative

给内部元素添加样式

css 复制代码 
position: absolute;
top: 50%;
transform: translate(0, -50%);
html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        margin: 30px;
        border: 1px solid gray;
        height: 100px;
        position: relative;
      }

      .item {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="item">垂直居中 -- 子绝父相 transform</div>
    </div>
  </body>
</html>

方案四：子绝父相 + 自动外边距（指定高度）

限制条件：内部元素需限定高度

给容器（父元素）添加样式

css 复制代码 
position: relative

给内部元素添加样式

css 复制代码 
position: absolute;
top: 0;
bottom: 0;
margin: auto;
  • 内联元素也有效，因为内联元素绝对定位后，display 会变为 block
html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        margin: 30px;
        border: 1px solid gray;
        height: 100px;
        position: relative;
      }

      .item {
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        background-color: yellow;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span class="item">垂直居中 -- 子绝父相 + 自动外边距</span>
    </div>
  </body>
</html>

方案五：子绝父相 + 负外边距 （知道高度 + 高度计算）

限制条件：需知道内部元素的高度

给容器（父元素）添加样式

css 复制代码 
position: relative

给内部元素添加样式

css 复制代码 
position: absolute;
top: 50%;
margin-top: -内部元素高度的一半;
html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        margin: 30px;
        border: 1px solid gray;
        height: 100px;
        position: relative;
      }

      .item {
        position: absolute;
        top: 50%;
        margin-top: -25px;
        height: 50px;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span class="item">垂直居中 -- 子绝父相 + 负外边距</span>
    </div>
  </body>
</html>

水平垂直居中

参考上文分别实现水平居中和垂直居中即可，常用方案如下：

方案一：flex布局【推荐】

给容器添加样式

css 复制代码 
display: flex;
justify-content: center;
align-items: center;

方案二：子绝父相 + transform （CSS3）

限制条件 ：浏览器需支持CSS3，比较老的浏览器不适用

给容器（父元素）添加样式

css 复制代码 
position: relative

给内部元素添加样式

css 复制代码 
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

方案三：子绝父相 + 自动外边距（指定高度和宽度）

给容器（父元素）添加样式

css 复制代码 
position: relative

给内部元素添加样式

css 复制代码 
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

方案四：子绝父相 + 负外边距 （知道宽度和高度 + 宽度和高度计算）

限制条件 ：需知道内部元素的宽度和高度

给容器（父元素）添加样式

css 复制代码 
position: relative

给内部元素添加样式

css 复制代码 
position: absolute;
left:50%;
margin-left:-内部元素宽度的一半;
top: 50%;
margin-top: -内部元素高度的一半;
html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        margin: 30px 30px 0px 300px;
        border: 1px solid gray;
        height: 100px;
        position: relative;
      }
      .item {
        background-color: yellow;
        position: absolute;
        left: 50%;
        margin-left: -150px;
        top: 50%;
        margin-top: -25px;
        width: 300px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span class="item">水平垂直居中 -- 子绝父相 + 负外边距</span>
    </div>
  </body>
</html>
相关推荐
全栈技术负责人12 分钟前
AI 效能工具建设：Agent 可观测性技能技术方案与实践
前端·ai·ai编程
梦想平凡22 分钟前
百游棋牌源代码开发搭建教程（一）：全端工程结构、开发环境配置与首次启动验证
前端·javascript·源代码管理
妙码生花27 分钟前
两个月 59 篇 AI 开发日志 + Golang 商业级实战项目收工后，得来的 AI 使用心法-上
前端·后端·gin
vx-Biye_Design33 分钟前
springboot中国传统节日宣传平台49078-计算机课程设计、毕业设计
java·前端·vue.js·spring boot·后端·课程设计·idea
妙码生花35 分钟前
两个月 59 篇 AI 开发日志 + Golang 商业级实战项目收工后，得来的 AI 使用心法-下
前端·后端·go
Highcharts41 分钟前
常见报错排雷指南3：兼容性问题的官方解法
javascript·数据可视化
5335ld1 小时前
app版本更新（vue3+unibest+静默更新+强制更新）
开发语言·javascript·ecmascript
Cho1yon2 小时前
【AI Agent 第十五期： AI Agent 从 0 到 1 系统学习大纲】
javascript·人工智能·学习
计算机魔术师2 小时前
Beren Millidge、John Schulman、Charlie O'Neill 对谈递归自我改进离我们还有多远
前端
MetaLite2 小时前
Java 时间处理的两个坑：单位误判，半秒算成一秒
java·开发语言·前端
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接03【一等奖版】2026 国赛 A题 药材的烘干问题04GitHub 镜像站点05历年考研数学一、数学二、数学三真题试卷及答案PDF06微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新07如何新建文件夹？ 电脑新建文件夹的4种方法082026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？09ZCode 周末送额度活动开启：3 亿 Token 免费领取10Agnes AI 免费 API 接入指南：文本、生图、生视频，一套接口全免费