CSS【详解】居中对齐 (水平居中 vs 垂直居中)

水平居中

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

方案一:文本居中对齐(内联元素)

限制条件:仅用于内联元素 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>
相关推荐
梦想CAD控件28 分钟前
网页CAD中组(Group)功能的二次开发
前端·javascript·github
讨厌吃蛋黄酥29 分钟前
🔥 JavaScript异步之谜:单线程如何实现“同时”做多件事?99%的人都理解错了!
前端·javascript·面试
华仔啊37 分钟前
别再纠结Pinia和Vuex了!一篇文章彻底搞懂区别与选择
前端·vue.js
徐同保1 小时前
Redux和@reduxjs/toolkit同时在Next.js项目中使用
开发语言·前端·javascript
~无忧花开~1 小时前
CSS学习笔记(二):CSS动画核心属性全解析
开发语言·前端·css·笔记·学习·css3·动画
渣哥1 小时前
Spring Boot 本质揭秘:约定优于配置 + 自动装配
javascript·后端·面试
小九今天不码代码1 小时前
深入理解 CSS 表格布局:table-layout 的秘密与实战详解(附费用报销单案例)
css·前端开发·表格布局·web设计·table-layout·页面优化·样式布局
颜酱1 小时前
了解 pnpm 的优势,然后将已有项目的 yarn 换成 pnpm
前端·javascript·前端工程化
海在掘金611272 小时前
从"鬼知道这对象有啥"到"一目了然" - TS接口的实战魔力
前端
spionbo2 小时前
Vue 模拟键盘组件封装方法与使用技巧详解
前端