0
点赞
收藏
分享

微信扫一扫

垂直居中的 8 种方式


 有些方式只适用于内联元素(行内元素),有些方式适用于所有元素,把我胸中韬略,一一展现。


在此之前,我先讲解一下W3C标准盒子模型:

 所有HTML元素可以看作盒子,它包括:外边距(margin)、边框(border)、内边距(padding)、实际内容(content)四个属性。

垂直居中的 8 种方式_居中


稍后会用到:

实际内容大小(Content)、

表面盒子大小(Content+Padding+Border)、

标准盒子大小(Content+Padding+Border+Margin);


1 所有元素line-height居中:

 子元素{line-height:父元素内容高度}  或

 子元素{font:24px/父元素内容高度 楷体;}

垂直居中的 8 种方式_内联元素_02


2 所有元素margin居中:

 子元素{margin-top:(父元素内容高度-子元素实际高度)/2}

 子元素{margin-bottom:(父元素内容高度-子元素实际高度)/2}

此方法易导致内容坍塌,加:父元素{overflow:hidden}  或

  父元素{边框}  子元素{边框}  可解决。

垂直居中的 8 种方式_居中_03


3 所有元素padding居中:

 父元素{padding-top:(父元素内容高度-子元素实际高度)/2}

 父元素{padding-bottom:(父元素内容高度-子元素实际高度)/2}

此方法易撑大盒子,加:父元素{内容高度 - padding-top}  或

  父元素{内容高度 - padding-bottom}  或

  父元素{box-sizing:border-box}

垂直居中的 8 种方式_垂直_04


4 所有元素transform居中:

 子元素{transform:translateY(父元素内容高度-子元素实际高度)/2)}

垂直居中的 8 种方式_垂直_05


5 内联元素 或 内联块元素vertical-align居中:

 相邻img{vertical-align:middle}

此方法只能配合图片使用,原理是:调准图片基线,让文字等对齐。

垂直居中的 8 种方式_垂直_06


6 所有元素定位(position)居中:

 父元素{position:relative}

 子元素{position:absolute;top:0;bottom:0;margin:auto;}  或

 子元素{position:fixed;top:0;bottom:0;margin:auto;}

垂直居中的 8 种方式_垂直_07


7 所有元素弹性盒子居中:

 父元素{display: flex;align-items: center;}

垂直居中的 8 种方式_css_08


8 所有元素网格布局居中:

 父元素:{display:grid;place-items:center;}

垂直居中的 8 种方式_垂直_09


垂直居中的 8 种方式_居中_10

  前端的学习不是一蹴而就,不积跬步无以至千里,不积小流无以成江海。持续不断的努力才能让你我有所收获,专业的知识还得到机构去学习,培训机构的设立有其存在的必然性,你钱花对了吗?

举报

相关推荐

0 条评论