css布局教程之如何实现垂直居中,


前言

最近在总结365bet体育在线手机_365bet _365bet娱乐平台官网知识,也参加了一些面试,面试中遇到一道题要求垂直居中,现在对这进行一下总结,也好巩固一下知识。

css实现垂直居中

1.利用line-height实现居中,这种方法适合纯文字类的;






css布局,实现垂直居中

2.通过设置父容器相对定位,子级设置绝对定位,标签通过margin实现自适应居中;






css布局,实现垂直居中

3.弹性布局flex 父级设置display: flex; 子级设置margin为auto实现自适应居中;


  



  
css布局,实现垂直居中

4. 父级设置相对定位,子级设置绝对定位,并且通过位移transform实现;


  



  
css布局,实现垂直居中

5. 父级设置弹性盒子,并设置弹性盒子相关属性;


 



  

6. 网格布局,父级通过转换成表格形式,然后子级设置行内或行内块实现。(需要注意的是:vertical-align: middle使用的前提条件是内联元素以及display值为table-cell的元素)。

 


 



  

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对WEB星球的支持。

相关文章

    暂无相关文章