订阅汇聚素材网Feed

移动webapp水平垂直居中 css3

应用css3不需要知道元素宽高多少便可以设定些元素水平垂直居中

一、只需要设置父元素并设定高度那么子元素就会自动水平垂直居中

方法一:

父元素选择器{
display:-webkit-flex;
justify-content:center:
align-items:center
height:200px;
}

方法二:

父元素选择器{
display:-webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
height:200px;
}

二、设定绝对定位,利用translate水平位移便可自动水平垂直居中

需要设定元素的选择器{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
25 人Likes
  

文章转载请注明:移动webapp水平垂直居中 css3-汇聚素材网

本文固定链接:http://www.webhj.com/hj-2412.html  +复制链接

目前共有 1 条留言 【 访客:1 条, 博主:0 条 】 访客以 1:0 暂时领先博主!

  1. 沙发
    朴人博客  

    支持css3的用这个最完美了

    2016 年 3 月 19 日 下午 12:43 @回复

发表评论

*

*

9 + 2

快捷键:Ctrl+Enter
0全站搜索 1 设计 2 素材 3 教材 4 WEB 5 电子书籍