时间:16-05-15 栏目:html5/css3 作者:zongyan86 评论:0 点击: 2,458 次
水平居中:
<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水平居中和垂直居中