CSS中垂直居中的简单实现方法_ Div+Css教程-查字典教程网
CSS中垂直居中的简单实现方法
CSS中垂直居中的简单实现方法
发布时间:2016-12-27 来源:查字典编辑
摘要:大家都知道css里面用text-align:center加上margin:0auto就可以实现水平居中了,但是垂直居中却没有相应的css属性...

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

通过CSS3的transform来实现

CSS Code复制内容到剪贴板 .center-vertical{ position:relative; top:50%; transform:translateY(-50%); } .center-horizontal{ position:relative; left:50%; transform:translateX(-50%); }

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新 Div+Css教程学习
    热门 Div+Css教程学习
    网页设计子分类