经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS » 查看文章
CSS实现元素居中原理解析_CSS教程_CSS
来源：jb51　　时间：2018/10/20 15:40:34　　对本文有异议

在 CSS 中要设置元素水平垂直居中是一个非常常见的需求了。但就是这样一个从理论上来看似乎实现起来极其简单的，在实践中，它往往难住了很多人。

让元素水平居中相对比较简单：如果它是一个行内元素，就对它的父元素应用 text-align: center；如果它是一个块级元素，就对它自身应用 margin: auto。

然而如果要对一个元素进行垂直居中，那就没有那么容易了，有时候光是想想就令人头皮发麻了。

本文分别从行内元素和块级元素进行说明，将目前比较流行的实现方式进行汇集并解析实现原理，方便大家查阅。这里要说明一点，每一种方式都不是十全十美的，关键要看自己的需求，从而分析出哪种实现方式是最合适的。

行内元素

首先我们先把基础代码写出来：

  1. <div class="main">
  2.     <span class="content">我是要居中的行内元素span</span>
  3. </div>
  1. .main {
  2.     width: 300px;
  3.     height: 300px;
  4.     background-color: #50ba8b;
  5. }
  6.  
  7. .content {
  8.     background-color: #5b4d4e;
  9.     color: #FFFFFF;
  10. }
  11.  

class 为 .main 的 div 包裹这一个 class 为 .content 的行内元素 span，我们的目的就是要让 .content 元素 在 .main 元素中居中。

水平居中

text-align

行内元素的水平居中比较简单，我们直接在 .main 中添加 text-align: center; 即可，此时 .main 变为：

  1. .main {
  2.     width: 300px;
  3.     height: 300px;
  4.     background-color: #50ba8b;
  5.     
  6.     text-align: center;  /* 水平居中 */
  7. }
  8.  

实现原理： 设置 text-align 的值为 center ，因为该属性规定元素中的文本的水平对齐方式，那么设置为 center 则文本就水平居中了。

垂直居中

line-height

行内元素的垂直居中我们分为 一行 和 多行或者图片等替换元素 来说明。

如果是 一行，那么我们可以使用 line-height 来实现，此时 .main 元素 css 代码变为：

  1. .main {
  2.     width: 300px;
  3.     height: 300px; /* 可以不设置 */
  4.     background-color: #50ba8b;
  5.  
  6.     line-height: 300px; /* 垂直居中 */
  7. }
  8.  

其实设置了 line-height 就可以让文本垂直居中，并不需要同时设置 height，这里也是一直存在的一个误区。

实现原理： 这种方式实现垂直居中运用的是 CSS 中“行距的上下等分机制”，这也说明了为什么该方式只适用于 一行 的文本。

还有一点需要说明是，这种方式实现的垂直居中是“近似”的，并不是完美的垂直居中，因为文字字形的垂直中线位置普遍要比真正的“行框盒子”的垂直中线位置低，而由于我们平时使用的 font-size 比较小，使得这点偏差不容易察觉出来，那么感官上也就看成是垂直居中了。

line-height 及 vertical-align

下面再来说说 多行或者图片等替换元素 的垂直居中效果实现，这里我们需要同时借助 line-height 和 vertical-align 来实现。

先让文本换行：

  1. <div class="main">
  2.     <span class="content">
  3.         我是要居中的行内元素span <br>
  4.         我是要居中的行内元素span
  5.     </span>
  6. </div>

再看修改之后的 css 代码：

  1. .main {
  2.     width: 300px;
  3.     background-color: #50ba8b;
  4.  
  5.     line-height: 300px;
  6. }
  7.  
  8. .content {
  9.     display: inline-block;
  10.     background-color: #5b4d4e;
  11.     color: #FFFFFF;
  12.     line-height: 20px;
  13.     margin: 0 20px;
  14.     vertical-align: middle;
  15. }
  16.  

实现原理：

  • 设置 .content 元素的 display 为 inline-block。作用在于既能重置外部的 line-height 为正常大小，又能保持行内元素特性，从而可以设置 vertical-align 属性，以及产生一个非常关键的“行框盒子”。我们需要的其实并不是这个“行框盒子”，而是每个“行框盒子”都会附带的一个产物 —— “幽灵空白节点”，即一个宽度为 0，表现如同普通字符的看不见的“节点”。有了这个“幽灵空白节点”，我们的 line-height: 300px; 就有了作用的对象，从而相当于在 .content 元素前面撑起了一个高度为 300px 的宽度为 0 的行内元素。
  • 因为行内元素默认都是基线对齐的，所以我们通过对 .content 元素设置 vertical-align: middle; 来调整多行文本的垂直位置，从而实现我们想要的“垂直居中”效果。这种方式也适用于 图片等替换元素 的垂直居中效果。当然这里的“垂直居中”也是近似的，这是由于 vertical-align 导致的，具体为什么可以深入了解 vertical-align: middle;。

块级元素

依然先把基础代码写出来：

  1. <div class="main">
  2.     <div class="content">我是要居中的块级元素div</div>
  3. </div>
  1. .main {
  2.     width: 300px;
  3.     height: 300px;
  4.     background-color: #50ba8b;
  5. }
  6.  
  7. .content {
  8.     width: 150px;
  9.     height: 150px;
  10.     background-color: #5b4d4e;
  11. }
  12.  

class 为 .main 的 div 包裹这一个 class 为 .content 的 块级元素 div，我们的目的就是要让 .content 元素 在 .main 元素中居中。

position + margin: auto

实现代码如下：

  1. .main {
  2.     width: 300px;
  3.     height: 300px;
  4.     background-color: #50ba8b;
  5.     
  6.     /*关键代码*/
  7.     position: relative;
  8. }
  9.  
  10. .content {
  11.     width: 150px;
  12.     height: 150px;
  13.     background-color: #5b4d4e;
  14.  
  15.     /*关键代码*/
  16.     position: absolute;
  17.     top: 0;
  18.     left: 0;
  19.     bottom: 0;
  20.     right: 0;
  21.     margin: auto;
  22. }
  23.  

实现原理：

  1. 设置 .main 元素为相对定位 position: relative;，这样其子元素设置绝对定位时就相对它了。
  2. 然后设置 .content 元素为绝对定位 position: absolute; 并设置它的 top、left、bottom、right 都为0，这样该元素的元素的尺寸表现为“格式化宽度和格式化高度”，和 <div> 的“正常流宽度”一样，同属于外部尺寸，也就是尺寸自动填充父级元素的可用尺寸，但由于此时我们设置了 .content 元素的宽高，就限制了元素自动填充，这样就多出来150px的空间了。
  3. 最后我们设置 .content 元素为 margin: auto; ，此时根据 auto 的计算规则，将上下左右剩余空间全部等分了，自然就居中了。

position + margin-left/top

实现代码如下：

  1. .main {
  2.     width: 300px;
  3.     height: 300px;
  4.     background-color: #50ba8b;
  5.     
  6.     /*关键代码*/
  7.     position: relative;
  8. }
  9.  
  10. .content {
  11.     width: 150px;
  12.     height: 150px;
  13.     background-color: #5b4d4e;
  14.  
  15.     /*关键代码*/
  16.     position: absolute;
  17.     top: 50%;
  18.     left: 50%;
  19.     margin-left: -75px;
  20.     margin-top: -75px;
  21. }
  22.  

实现原理：

  1. 设置 .main 元素为相对定位 position: relative;，这样其子元素设置绝对定位时就相对它了。
  2. 然后设置 .content 元素为绝对定位 position: absolute; 并设置 top: 50%;、left: 50%;，这样.content 元素的左上角就位于 .main 元素的中心了。
  3. 最后设置 .content 元素 margin-left: -75px;、margin-top: -75px; 将自身左移及上移宽高的一半，这样 .content 元素的中心处于 .main 元素的中心处，自然就实现了居中效果。
  4. 这种方法的缺点就是需要固定 .content 元素的宽高。

position + translate

实现代码如下：

  1. .main {
  2.     width: 300px;
  3.     height: 300px;
  4.     background-color: #50ba8b;
  5.     
  6.     /*关键代码*/
  7.     position: relative;
  8. }
  9.  
  10. .content {
  11.     width: 150px;
  12.     height: 150px;
  13.     background-color: #5b4d4e;
  14.  
  15.     /*关键代码*/
  16.     position: absolute;
  17.     top: 50%;
  18.     left: 50%;
  19.     transform: translate(-50%, -50%);
  20. }
  21.  

实现原理：

  1. 设置 .main 元素为相对定位 position: relative;，这样其子元素设置绝对定位时就相对它了。
  2. 然后设置 .content 元素为绝对定位 position: absolute; 并设置 top: 50%;、left: 50%;，这样.content 元素的左上角就位于 .main 元素的中心了。
  3. 最后设置 .content 元素 transform: translate(-50%, -50%); 将自身左移及上移宽高的一半，这样 .content 元素的中心处于 .main 元素的中心处，自然就实现了居中效果。
  4. 这种方法的好处就是不需要固定 .content 元素的宽高。

Flexbox

实现代码如下：

  1. .main {
  2.     width: 300px;
  3.     height: 300px;
  4.     background-color: #50ba8b;
  5.  
  6.     /*关键代码*/
  7.     display: flex;
  8. }
  9.  
  10. .content {
  11.     width: 150px;
  12.     height: 150px;
  13.     background-color: #5b4d4e;
  14.  
  15.     /*关键代码*/
  16.     margin: auto;
  17. }
  18.  

实现原理：

  • 设置 .main 元素 display: flex;。
  • 然后设置 .content 元素为 margin: auto; 即可实现居中。
  • 这是毋庸置疑的最佳解决方案，我们不需要设置 .content 元素为绝对定位，margin: auto 自然就可以作用于宽高，而且我们也不需要设置 .content 元素的宽高， 因为Flexbox(伸缩盒)是专门针对这类需求所设计的。
  • 缺点就是目前浏览器支持程度相对其它方式会低些。

Flexbox 的另一个好处在于，它还可以将匿名容器(即没有被标签包裹的文本节点)垂直居中。比如我们不设置 .main 元素为 display: flex;，而是设置 .content 元素为 display: flex;，并借助 Flexbox 规范所引入的 align-items 和 justify-content 属性，我们可以让它内部的文本也实现居中（我们可以对.main 元素使用相同的属性来使 .content 元素元素居中，但比 margin: auto 方法要更加优雅一些，并且同时起到了回退的作用）。

  1. .content {
  2.     width: 150px;
  3.     height: 150px;
  4.     background-color: #5b4d4e;
  5.  
  6.     /*关键代码*/
  7.     display: flex;
  8.     align-items: center;
  9.     justify-content: center;
  10.     margin: auto;
  11. }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持w3xue。

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS热门文章

  • CSS实现文字两端对齐
  • 【WEB基础】HTML & CSS 基础入门（6）超链接
  • Javascript 对象 - 数学对象
  • 对移动端兼容适配的分析
  • Element FORM结合Vue实现横向排列表单项
  • 如何让一个input输入框居中
  • CSS Grid 布局完全指南(图解 Grid 详细教程)
  • css常见的各种布局上（两列布局）
  • vue+element导入导出excel
  • WEB前端动态背景集

    • CSS推荐文章

  • CSS布局概念与技术教程
  • 15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder
  • 现代 CSS 解决方案：文字颜色自动适配背景色！
  • 脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质
  • 深入解析css-笔记
  • CSS 还原拉斯维加斯球数字动画
  • 震惊！CSS 也能实现碰撞检测？
  • 前端开发如何更好的避免样式冲突？级联层(CSS@layer)
  • 现代 CSS 解决方案：CSS 原生支持的三角函数
  • 利用css var函数让你的组件样式输出规范样式API，可定制性更高；

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号