【HTML-CSS】总结 -6 种实现元素上下左右居中方法 -- 附演示效果

作者：Sam9029

2022 年 9 月 13 日
四川
本文字数：3619 字
阅读完需：约 12 分钟

🦖我是 Sam9029，一个前端
Sam9029 的 InfoQ 主页:Sam9029 (infoq.cn)
**🐱‍🐉🐱‍🐉恭喜你，若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！👍**

上下左右居中--方法总结手册

⭐附源码以及演示效果⭐
其实我想去取名叫 上下左右居中--方法总结大全 的😁
🐸其实就是水平垂直居中 的方法总结

这就是一篇页面 上下左右居中--方法总结

旨在温习，和拓展

说到这，不妨说出你认为的上下左右居中的方法有多少种🧐
（我之前，就会只常见的三种（flex，定位+transform，gird））

今天我将重新学习 上下左右居中方法

使用前注意

注意：每种方法的使用场景问题

在实现上下左右（水平垂直）居中时，我们总需要考虑的两个主要对象

🧔父元素和 👦子元素（即被实现-上下左右居中的元素）

所以我们在使用不同的方法时就必须考虑🧔父元素的某些问题

对，如下

❗以及父元素是否为块元素（或者行内块元素）
因为行内元素是无法设置宽高的，你就无法实现其子元素上下左右的居中
再说在行内元素身体内再次嵌套元素，也不太符合常规逻辑
❗还有就是父元素的宽高
结论：所以要实现子元素的上下左右居中，其父元素应该为块元素（或者行内块元素），且有宽高

问题又来了,你想想，既然父元素必有宽高,那我们一定需要知道它的具体数值吗？

- 这就像，老爸有多少私房钱(父元素宽高的具体数值)？，你想要（上下左右居中）相当于找老爸要零花钱，但你不需要知道老爸到底有多少私房钱（因为老妈也可能不知道）
- 反过来，你也可以试图弄清楚老爸有多少零花，可能是你问他，可能是他主动告诉你
- 你不知道或者知道老爸的私房钱数目都没关系，因为你唯一确定的是老爸他很宠你，一定会给你零花钱一样

所以我们在实现上下左右居中时，就会有两种情况

1. 已知宽高的父元素的情形下

2. 未知宽高的父元素的情形下

🌤每种实现方式都会给出使用场景

此文将介绍`6种` 实现元素上下左右居中方法

1.定位+transform

<body><!-- 父元素--><div class="fa">  <!--子元素-->  <div class="son"></div></div>
<!--CSS--><style>    /* 注意消去默认的margin+padding影响 */    body,div{      box-sizing:border-box;      margin:0;      padding:0;    }    .fa{      width:100vw;      height: 100vh;      border:5px solid tomato;      position:relative;    }    .son{      width:100px;      height: 100px;      border:5px solid black;      position:absolute;      top:50%;      left:50%;      transform:translate(-50%,-50%);    }</style>

复制代码

🐸使用场景：
未知宽高父元素
已知宽高父元素
效果演示：
上下左右居中--定位+transform-SAM9029-codepen
实现过程讲解，很详细，推荐：#HTML元素居中方法总结 - 暮冬有八 - 博客园 (cnblogs.com) （B 友笔记）

2.flex 布局实现

<body><div class="fa">  <div class="son"></div></div>
<style>  /* 注意消去默认的margin+padding影响 */body,div{  box-sizing:border-box;  margin:0;  padding:0;}.fa{  width:100vw;  height: 100vh;  border:5px solid tomato;    display:flex;  justify-content:center;  align-items:center;  }.son{  width:100px;  height: 100px;  border:5px solid black;}</style></body>

复制代码

🐸使用场景：
未知宽高父元素
已知宽高父元素
效果演示：
上下左右居中--Flex实现--SAM9029-codepen
实现过程讲解，很详细，推荐：#HTML元素居中方法总结 - 暮冬有八 - 博客园 (cnblogs.com) （B 友笔记）

3.gird 布局实现

CSS Grid 布局可以说是现代 Web 布局中的银弹。它也是到目前为止布局系统中唯一一个二维布局系统。

<body><div class="fa">  <div class="son"></div></div>
<style>  /* 注意消去默认的margin+padding影响 */body,div{  box-sizing:border-box;  margin:0;  padding:0;}.fa{  width:100vw;  height: 100vh;  border:5px solid tomato;    display:grid;  /*or*/  /*display:inline-gird;*/  /*对 没错 仅一句话 即可实现上下左右居中*/  place-items: center  }.son{  width:100px;  height: 100px;  border:5px solid black;}</style></body>

复制代码

🐸使用场景：
未知宽高父元素
已知宽高父元素
效果演示：
上下左右居中--Gird实现--SAM9029-codepen

4.`display:table`实现

❗关于display:table实现，❗得多讲两句需要注意得地方
此处使用得 dom 结构是三层（div.fa>div.son>img）
注意第三层，即在(son内部)display 设置为 table-cell 内部的元素应该是 行内块元素或者行内元素
这不难理解，table 内本身（div.fa 此时已相当于一个table元素）就该写内容，内部应该在嵌套元素了

<body>    <div class="fa">    <div class="son">          <img src="./dog.png" alt="">      <!--  此处必须注意：不能使用块元素，即在table-cell 中的 元素应该是 行内块元素或者行内元素    -->  <!--  如你非要使用div，则需要使用display:inline-block;    -->  <!--     <div class="item"></div> -->    </div>  </div>    <style>    body,div{      box-sizing:border-box;      margin:0;      padding:0;    }    body{      width:100vw;      height:100vh;    }    .fa{      width: 80%;      height: 80%;      display: table;      border:5px solid skyblue;    }    .son{      border:10px solid tomato;      display: table-cell;      vertical-align: middle;      text-align: center;/*单元格是行内元素*/    }    img,.item{      display:inline-block;      width:100px;      height:100px;      border:1px solid black;    }  </style></body>

复制代码

🐸使用场景：
未知宽高父元素
已知宽高父元素
效果演示：
上下左右居中--display-table实现 sam9029-codepen.io

5.line-height 实现

❗line-height 实现，❗也得多讲两句需要注意得地方
这里案例使用的 DOM 结构是 div.fa > text(直接是内容)
同时 .fa 内部的元素也应该是 行内块元素或者行内元素
这也不难理解，因为若使用 line-height（控制上下居中），那就得使用 text-align（控制左右居中）
也这就是关键line-height和text-align设置仅对元素内的行内块元素和行内元素生效，对块元素无效
拓展：vertical-align同样仅对元素内的行内块元素和行内元素生效，

<body>    <div class="fa">
    text    <!-- fa 里面的内容 必须是行内块元素或行内元素 -->    <!--/* 将son 设置为行内块元素*/--><!--     <div class="son"></div> -->  </div>    <style>        body,div{      box-sizing:border-box;      margin:0;      padding:0;    }    body{      width:100vw;      height:100vh;    }    .fa{      width: 500px;      height: 500px;      border:5px solid skyblue;          /*左右居中，text-align设置 仅对元素内的 行内块元素和行内元素生效*/      text-align:center;      line-height:500px;    }    /* 将son 设置为行内款元素*/    .son{      display:inline-block;      width: 100px;      height: 100px;      border:2px solid black;
    }  </style></body>

复制代码

🐸使用场景：
已知宽高父元素
效果演示：
上下左右居中--line-height实现 sam9029-codepen.io

6.未知名称法（使用纯定位）

拓展-不建议使用

<body>    <div class="fa">    <div class="son">        </div>  </div>    <style>    body,div{      box-sizing:border-box;      margin:0;      padding:0;    }    body{      width:100vw;      height:100vh;    }    .fa{      width: 80%;      height: 80%;      border:5px solid skyblue;      position:relative;    }    .son{      width: 100px;      height: 100px;      border:2px solid black;            margin:auto;      position:absolute;      top:0;      left:0;      right:0;      bottom:0;          }  </style></body>

复制代码

演示效果
上下左右居中--未知名称法（使用纯定位）SAM9029-codepen

注意事项

消去默认`margin`+`padding`影响

注意所有案例中，都默认消去了margin+padding影响

/* 注意默认的margin+padding消去影响 */body,div{  box-sizing:border-box;  margin:0;  padding:0;}

复制代码

`text-align`/`line-height`/`vertical-align` 设置仅对元素内的行内块元素和行内元素生效

参考

[HTML] 上下左右置中对齐的三种方法-CodingStartup起码课-bilibili
#HTML元素居中方法总结 - 暮冬有八 - 博客园 (cnblogs.com) （B 友笔记）
讲解了定位，flex，display:table 的实现，推荐观阅

🦖我是 Sam9029，一个前端，坚信`应无所往`

文章若有错误，敬请指正🙏
**🐱‍🐉🐱‍🐉恭喜你，都看到这了，求收藏，求评论，求一个大大的赞👍！不过分吧**
Sam9029 的 InfoQ 主页:Sam9029 (infoq.cn)

发布于: 1 小时前阅读数: 6

原文链接:【http://xie.infoq.cn/article/774741d274954dc02205f8a8a】。文章转载请联系作者。

Sam9029

关注

庸俗 2022.09.03 加入

好色

发布

暂无评论

创作场景

【HTML-CSS】总结 -6 种实现元素 上下左右居中 方法 -- 附演示效果

上下左右居中--方法总结手册

使用前注意

注意：每种方法的使用场景问题

1. 已知 宽高 的父元素 的情形下

2. 未知 宽高 的父元素的情形下

此文将介绍6种 实现元素 上下左右居中方法

1.定位+transform

2.flex 布局实现

3.gird 布局实现

4.display:table实现

5.line-height 实现

6.未知名称法（使用纯定位）

注意事项

消去默认margin+padding影响

text-align/line-height/vertical-align 设置 仅对元素内的 行内块元素和行内元素生效

参考

🦖我是 Sam9029，一个前端，坚信应无所往

Sam9029

评论

【HTML-CSS】总结 -6 种实现元素上下左右居中方法 -- 附演示效果

1. 已知宽高的父元素的情形下

2. 未知宽高的父元素的情形下

此文将介绍`6种` 实现元素上下左右居中方法

4.`display:table`实现

消去默认`margin`+`padding`影响

`text-align`/`line-height`/`vertical-align` 设置仅对元素内的行内块元素和行内元素生效

🦖我是 Sam9029，一个前端，坚信`应无所往`