CSS中怎么实现垂直居中

本篇内容介绍了“CSS中怎么实现垂直居中”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

大家都知道css里面用text-align:center加上margin:0 auto就可以实现水平居中了，但是垂直居中却没有相应的css属性来设置，而如果要设置元素能够垂直居中必须得将容器设置为display:table，然后将子元素也就是要垂直居中显示的元素设置为display:table-cell，然后加上vertical-align:middle来实现。
通过CSS3的transform来实现

CSS Code复制内容到剪贴板

1. .center-vertical {   

2.   position: relative;   

3.   top: 50%;   

4.   transform: translateY(-50%);   

5. }   

6. .center-horizontal {   

7.   position: relative;   

8.   left: 50%;   

9.   transform: translateX(-50%);    

10. }     

“CSS中怎么实现垂直居中”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！