1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
1.背景介绍
在前端开发过程中,盒子居中是常常用到的。其中 ,居中又可以分为水平居中和垂直居中。水平居中是比较容易的,直接设置元素的margin: 0 auto就可以实现。但是垂直居中相对来说是比较复杂一些的。
垂直居中就是竖向居中
下面我们一起来讨论一下实现垂直居中的方法。css有哪些方式可以实现垂直居中
该方式适用于情况比较简单的单行文本,只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了。
2.1父级元素display:table-cell,vertical-align:middle;
2.2多行内容居中,且容器高度可变,也很简单,给出一致的 padding-bottom 和 padding-top ;
给元素设置dispaly:inline-block配合vertical-align:middle来垂直居中
说明: 父元素相对定位,子元素绝对定位。 子元素的上下左右均设置0定位且设置margin:auto
说明: CSS3的兴起,使得垂直居中有了更好的解决方法,就是使用transform. transform中translate偏移的百分比值是相对于自身大小的
说明: 给父元素设置display:flex后再设置align-items: center表示让子元素垂直居中;
使用writing-mode实现垂直居中
取值:
vertical-rl:垂直方向自右而左的书写方式。
vertical-lr:垂直方向自左而右的书写方式。
click me
参考一:盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
参考二:纯CSS实现垂直居中的几种方法
1.还有更多实现垂直居中的方法吗?
2.怎么实现水平居中?
3.怎么实现水平垂直居中?
感谢大家观看
By 王奎智丨曾健