当前位置： 移动技术网 > IT编程>网页制作>CSS > CSS中垂直居中的简单实现方法

CSS中垂直居中的简单实现方法

2019年07月25日  | 移动技术网IT编程  | 我要评论

大家都知道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. }     


您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网