• 技术文章 >web前端 >html教程

    介绍一种css水平垂直居中的方法(非常好用!)_html/css_WEB-ITnose

    2016-06-24 11:33:16原创594
    这次介绍一下一个水平垂直居中的css方法,这个方法可以说是百试百灵,废话不多说,直接附上代码:

    html,body{

    width:100%;

    height:100%;

    }

    你需要居中的元素{

    position: fixed;(absolute)
    left:50%;
    top:50%;
    -webkit-transform: translate(-50%,-50%);

    }

    他的父元素{

    position: relative;

    width:100%;

    height:100%;

    }

    当然,你的父元素是需要一个高度的,不管是根据html和body的height:100%;还是具体的高度,这样子,你的元素不管怎么样都可以居中。根本不用去考虑margin或者padding或者float之类的属性,是不是很神奇!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    上一篇:img标签怎么只显示图片的一部分_html/css_WEB-ITnose 下一篇:notepad++的emmet插件生成代码问题_html/css_WEB-ITnose
    线上培训班

    相关文章推荐

    • html怎么设置元素不可见• html怎么设置表格标题• html图片的透明度怎么设置• html div怎么设置大小• html怎么去掉input边框

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网