css水平居中和垂直居中

时间:16-05-15 栏目:html5/css3 作者:zongyan86 评论:0 点击: 1,093 次

水平居中:

<center> 不建议用了。

行内元素水平居中,父级text-align:center

定宽块级元素  margin: 20px auto;

不定宽块级元素 

1 加入 table 标签
2 设置 display: inline 方法:与第一种类似,显示类型设为 行内元素,进行不定宽元素的属性设置
3 设置 position:relative 和 left:50%:利用 相对定位 的方式,将元素向左偏移 50% ,即达到居中的目的

垂直居中

1.height:30px;line-height:30px;

2.table  vertical-align:middle;

3.display:table-cell;/*IE8以上及Chrome、Firefox*/
   vertical-align:middle;/*IE8以上及Chrome、Firefox*/

4.font-size

5.

.parent {
    width: 200px;
    height: 200px;
    background-color: black;
}
.child {
    position: relative;
    height: 100px;
    width: 100px;
    top: 50%;
    left: 50%;
    background-color:red;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

参考 http://www.5icool.org/a/201309/a2516.html

       http://www.cnblogs.com/wishyouhappy/p/3681037.html?utm_source=tuicool&utm_medium=referral



声明: 本文由( zongyan86 )原创编译,转载请保留链接: css水平居中和垂直居中

css水平居中和垂直居中:等您坐沙发呢!

发表评论



热搜关键词: easyui   开发   web开发
广告虚位以待

读者排行

关注我们