实践中的垂直居中

dongfangyiyu 发布于2019-08-30 14:01 / 2772人阅读

摘要：背景在项目中经常碰到让元素垂直居中的情形，实现的方法有很多，各有利弊。今天就利用下业余时间，汇总一下常用的几种垂直居中的方式。

背景：在项目中经常碰到让元素垂直居中的情形，实现的方法有很多，各有利弊。众所周知的，用flex布局很容易就实现，but，一些不是很主流的浏览器并不支持flex，这就比较尴尬了，有好东西不能在项目中用起来。今天就利用下业余时间，汇总一下常用的几种垂直居中的方式。
废话少说，开整。

如图，如果想让盒子A在盒子B内垂直居中

flex方式，兼容到ie10

.box {
    display: -webkit-flex;  /* 新版本语法: chrome 21+ */
    display: flex;          /* 新版本语法: opera 12.1, firefox 22+ */         /*flex-direction: row; // 默认水平排列 */
    align-items: center; /* 元素排列的垂直方向居中 */
}

利用ifc(行内格式化上下文)，其实就是利用行高撑高父元素，视觉上表现也为垂直居中。

.box {
  line-height: 100px;
 }
.item {
  display: inline;
}

绝对相对定位

.box {
  position: relative;
}
.item {
  position: absolute;
  top: 50%;
  margin-top: -10px; // 自身高度的一半，此用法需要知道自身的高度
  // transform: translateY(-50%); // 兼容性允许的话可以用css3特性代替margin-top
}
// 绝对定位另一种方式
.item {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  // left: 0; right: 0; // 这样还能水平居中
}

利用vertical-align,为了不产生新的dom，可能使用伪类before做辅助，让子元素与伪类垂直居中对齐

.box:before {
  content: "";
  height: 100%;
  vertical-align: middle;
  display: inline-block;
}
.item {
  display: inline-block;
}

突然发现，实现垂直居中的方法有很多，此处先列举几个作参考，如有纰误，欢迎评论指正。如遇到具体情况不知道怎么实现的同学，也可以私信我，日后也继续完善此贴。

GPU云服务器云服务器垂直居中实现垂直居中水平垂直居中文字垂直居中

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

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

实践中的垂直居中

摘要：背景在项目中经常碰到让元素垂直居中的情形，实现的方法有很多，各有利弊。今天就利用下业余时间，汇总一下常用的几种垂直居中的方式。背景：在项目中经常碰到让元素垂直居中的情形，实现的方法有很多，各有利弊。众所周知的，用flex布局很容易就实现，but，一些不是很主流的浏览器并不支持flex，这就比较尴尬了，有好东西不能在项目中用起来。今天就利用下业余时间，汇总一下常用的几种垂直居中的方式。...

joy968 2019-08-01 18:38 评论0 收藏0
css居中最佳实践

摘要：居中是非常常见的问题，也是面试热门，现在对居中问题做个总结水平居中万能的居中给父元素添加子元素都会居中，无论是还是缺点属性会继承会影响后代元素配合缺点以下不兼容，不过低版本微软自家都不支持了垂直居中单行居中与相等即可达到居中配 css居中是非常常见的问题，也是面试热门，现在对居中问题做个总结水平居中万能的text-align居中给父元素添加text-align:　center,子...

BlackFlagBin 2019-08-29 11:02 评论0 收藏0
《CSS世界》笔记三：内联元素与对齐

摘要：上一篇世界笔记二盒模型四大家族下一篇世界笔记四流的保护与破坏写在前面在页面布局中，内联元素的垂直对齐是比较常见和基础的布局需求，但是我们往往会因为垂直对齐中的，而头疼不已。上一篇：《CSS世界》笔记二：盒模型四大家族下一篇：《CSS世界》笔记四：流的保护与破坏写在前面在页面布局中，内联元素的垂直对齐是比较常见和基础的布局需求，但是我们往往会因为垂直对齐中的1px，2px而头疼不已...

HtmlCssJs 2019-08-29 16:19 评论0 收藏0
一篇文章了解移动端文本垂直居中

摘要：经常我们在浏览器上调试的好好的，但是到了移动端就会有各种奇特的适配问题最经常遇见莫过于中文字稍微偏上了。为什么中文本偏上文本都会有一个内容区域，这个区域就是我们选中文本时展示的区域。在日常工作中，经常会遇到图片+文字+背景色的设计稿实现。经常我们在Chrome浏览器上调试的好好的，但是到了移动端就会有各种奇特的适配问题——最经常遇见莫过于Android中文字稍微偏上了。在iOS和An...

sutaking 2019-08-23 13:50 评论0 收藏0