资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/【第1期】聊聊css居中那点事

【第1期】聊聊css居中那点事

刘永祥 / 2104人阅读

摘要：前言居中是网页布局中再常见不过的一种方式了，今天我们就来聊聊居中的那点事。我是水平居中的同样是针对块级元素才有效果。来看代码我是水平居中的必须配合来使用来可以实现居中的效果。方法二我是垂直居中的注意此方法要考虑的兼容性问题。

前言：居中是网页布局中再常见不过的一种方式了，今天我们就来聊聊css居中的那点事。

我们主要从这几个方面来了解下居中：

水平居中

垂直居中

水平垂直居中

水平居中

水平居中又分为：

文字水平居中

图片水平居中

已知元素宽度的水平居中

未知元素宽度的水平居中

文字水平居中

实现文字的水平居中，是最为简单的了，加上text-align: center;即可，看以下代码：


  文字水平居中

.text-center {
  text-align: center;
}
注意：父元素必须是块级元素，即display: block;至于什么是块级元素，不在本文讨论的范围
图片水平居中

图片水平居中跟文字一样，也是使用text-align: center;

非图片文本元素，已知宽度的水平居中 方法一：margin: 0 auto;

比如div元素，假设我们已经知道它的宽度是300px,这时候我们就可以这样设置,加上margin: 0 auto;这句代码。


  我是水平居中的div

.div1 {
  width: 300px;
  margin: 0 auto;
}

同样是针对块级元素才有效果。

方法二：绝对定位+负边距 

  


.parent3 {
  position: relative;
}

.child3 {
  position: absolute;
  left: 50%;
  width: 300px;
  margin-left: -150px;  // 宽度的一半
}
非图片文本元素，未知宽度的水平居中 方法一：使用text-align: center + inline-block

我觉得比较简单的方法就是给父元素设置text-align: center;给子元素添加display: inline-block;这样就行了，还是来看代码比较直接。


  
未知元素宽度


.parent {
  text-align: center;
}

.child {
  display: inline-block;
  padding: 20px;
  background: red;
}
方法二：使用绝对定位 + transform: translate()

父元素设置相对定位position: relative;;子元素设置绝对定位position: absolute加transform。看以下例子：


  
我是水平居中的div


.parent {
  position: relative;
}

.child {
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  padding: 20px;
  background: red;
}
注意：为了更好的兼容性，transform需要加上不同浏览器的前缀。
方法三：使用浮动

还是来看具体的代码：


  
我是水平居中的div


.parent2 {
  position: relative;
  float: left;
  left: 50%;
}

.child2 {
  position: relative;
  right: 50%;
  padding: 20px;
  background: red;
}
方法四：flex实现水平居中 

  
我是水平居中的div


.parent4 {
  position: relative;
  display: flex;
  justify-content: center;
}

.child4 {
  padding: 20px;
  background: red;
}
注意：flex有兼容性问题，关于flex的兼容性写法，大家可以自行百度下，也可以在caniuse查看浏览器的兼容情况
方法五：fit-content属性

“fit-content”是CSS中给“width”属性新加的一个属性值，他配合margin可以让我轻松的实现水平居中的效果。这个方法也是我第一次用到，后期有时间再来仔细研究学习下。

来看代码：


  我是水平居中的div

.fitContentDiv {
  width: fit-content;
  margin: 0 auto;
  height: 100px;
  background: red;
  padding: 20px;
}

必须配合margin: 0 auto;来使用来可以实现居中的效果。

注意：同样是存在浏览器的兼容性问题。
垂直居中

文字的垂直居中

图片的垂直居中

已知元素高度的垂直居中

未知元素高度的垂直居中

文字的垂直居中 方法一：height=line-height

这个比较简单，只需要设置高度height和行高line-height相等即可。看代码：


  我是垂直居中的文字

.txt1 {
  height: 100px;
  line-height: 100px;
  background: red;
}
注意：这个方法有个不好的地方就是只能是针对单行的文字，多行就不适合用。
方法二：使用padding

我们设置padding-top和padding-bottom相等就可以了，而且此方法针对多行文字也没问题。看代码：


  我是垂直居中的文字

.txt2 {
  padding-top: 20px;
  padding-bottom: 20px;
  background: red;
}
注意：这种方法也是有一个明显的缺陷，就是你不能给文本的父元素设置高度。
方法三：table+table-cell

此方法是利用表格单元格的特性，我们直接看代码：


  
我是垂直居中的文字（这里面也可以放图片）


.parent6 {
  display: table;
  width: 300px;
  height: 300px;
  background: blue;
}

.child6 {
  display: table-cell;
  vertical-align: middle;
}

此方法对图片同样有效，而且文本也可以多行，是一种不错的方法。

图片的垂直居中

使用vertical-align: middle，直接看代码：


  

.img-va-center {
  height: 300px;
  line-height: 300px;
  background: red;
}

.img-va-center img {
  display: inline-block;
  vertical-align: middle;
}
已知元素高度的垂直居中 方法一：绝对定位+负边距

看代码：


  
我是垂直居中的div


.parent6 {
  position: relative;
  height: 300px;
  background: red;
}

.child6 {
  position: absolute;
  top: 50%;
  left: 0;
  width: 50px;
  height: 50px;
  margin-top: -25px;
  background: gray;
}
未知元素高度的垂直居中 方法一：绝对定位+transform

直接上代码了：


  
我是垂直居中的div


.parent7 {
  position: relative;
  width: 300px;
  height: 300px;
  background: red;
}

.child7 {
  position: absolute;
  top: 50%;
  width: 50px;
  padding: 10px;
  background: gray;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
注意：同样需要考虑transform的兼容性问题。
方法二：flex+margin 

  
我是垂直居中的div


.parent8 {
  display: flex;
  width: 300px;
  height: 300px;
  background: blue;
}

.child8 {
  margin: auto;
  padding: 20px;
  background: gray;
}
注意：此方法要考虑flex的兼容性问题。
方法三：flex+align-items 

  
我是垂直居中的div


.parent9 {
  display: flex;
  align-items: center;
  width: 300px;
  height: 300px;
  background: blue;
}

.child9 {
  padding: 20px;
  background: gray;
}
注意：此方法要考虑flex的兼容性问题。
水平垂直居中

水平垂直居中就是把水平居中跟垂直居中的方法结合起来使用啦，这里就不再举例了。

总结

这里虽然列举了那么多例子，但是方法终归是死的，业务需求是变化多端的，具体还是要根据我们项目的业务需求来搭配使用。css很强大，要实现同一个功能，可以有很多种方法，并不只有我列举的这些，关键是要找到适合业务需求的方法，如果你有更好的方法，欢迎留言讨论，大家一起学习进步！

云服务器 GPU云服务器 《HelloGitHub》第 67 期 《HelloGitHub》第 65 期 独立开发变现周刊（第 17 期）：为了活 独立开发变现周刊（第25期）：免费表单生

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117192.html

相关文章

  • 查漏补缺 - 收藏集 - 掘金

    摘要：酝酿许久之后，笔者准备接下来撰写前端面试题系列文章，内容涵盖浏览器框架分钟搞定常用基础知识前端掘金基础智商划重点在实际开发中，已经非常普及了。 这道题--致敬各位10年阿里的前端开发 - 掘金很巧合，我在认识了两位同是10年工作经验的阿里前端开发小伙伴，不但要向前辈学习，我有时候还会选择另一种方法逗逗他们，拿了网上一道经典面试题，可能我连去阿里面试的机会都没有，但是我感受到了一次面试1...

    YuboonaZhang 评论0 收藏0

  • 聊聊加密那点事——PHP加密最佳实践

    摘要：所谓对称加密，就是加密和解密使用同一秘钥，这也是这种加密算法最显著的缺点之一。非对称加密算法由于对称加密在通信加密领域的缺陷，年和提出了非对称加密的概念。非对称加密，其主要缺点之一就是慢，适合加密少量数据。 1. 加密的目的 加密不同于密码，加密是一个动作或者过程，其目的就是将一段明文信息（人类或机器可以直接读懂的信息）变为一段看上去没有任何意义的字符，必须通过事先约定的解密规则才能将...

    lcodecorex 评论0 收藏0

  • 聊聊加密那点事——PHP加密最佳实践

    摘要：所谓对称加密，就是加密和解密使用同一秘钥，这也是这种加密算法最显著的缺点之一。非对称加密算法由于对称加密在通信加密领域的缺陷，年和提出了非对称加密的概念。非对称加密，其主要缺点之一就是慢，适合加密少量数据。 1. 加密的目的 加密不同于密码，加密是一个动作或者过程，其目的就是将一段明文信息（人类或机器可以直接读懂的信息）变为一段看上去没有任何意义的字符，必须通过事先约定的解密规则才能将...

    Mr_zhang 评论0 收藏0

  • 2017-10-10 前端日报

    摘要：前端日报精选第期写给前端应届生的职业规划建议应用编译优化之路进阶篇命名空间模式解析源码解析之任务管理入门教程快速上手聊聊改变历史中文正式发布，带来种新的图表类型关系图解好好写代码吧使用手册掘金发布在即将全面支持掘金仿懂球帝 2017-10-10 前端日报 精选 【第1074期】写给前端应届生的职业规划建议webpack 应用编译优化之路JS进阶篇--命名空间模式解析gulp源码解析之任...

    myshell 评论0 收藏0

  • 移动端开发：架构那点事！

    摘要：移动精英开发社群的第期，也是围绕架构这个话题进行讨论。本次我们希望结合实际开发中遇到的问题，来聊聊移动端的架构设计。这样的模式改进一些，可能会更适合移动端架构。潘卫杰之前我们公司移动端的大项目就是插座式开发的，批量出各个行业的。 此前，58 同城的技术委员会执行主席沈剑在 OneAPM 的技术公开课上分享过一个主题，「好的架构不是设计出来的，而是演技出来的」。因为对很多创业公司而言，随...

    KnewOne 评论0 收藏0

发表评论

登陆后可评论

0条评论

刘永祥

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<