css div 垂直居中

Posted on Posted in css
Tips: 本文创建于2016年1月5日,已超过 2 年,内容或图片可能已经失效!

html

  1. <div class="center">您可以尝试改变浏览器大小,这个元素依然是水平垂直居中的哦!</div>  

css

  1. .center{  
  2. positionabsolute;  
  3. top: 50%;  
  4. left: 50%;  
  5. width:50%;  
  6. height:30%;  
  7. padding:20px;  
  8. text-align:center;  
  9. background:#393;  
  10. color:#fff;  
  11. transform: translate(-50%, -50%);  
  12. }  

如果你直接复制代码无法使用,请添加-webkit-transform或-moz-transform前缀,案例中我使用了-prefix-free这个插件,插件作用就是不需要输入-moz-和-webkit-这些前缀。

» 转载请注明来源:若我若鱼 » css div 垂直居中

Leave a Reply

Your email address will not be published. Required fields are marked *

one × four =