成都web前端培训
成都达内金融街中心

18328393564

热门课程

元素水平居中css代码分享

  • 时间:2016-06-30 13:42
  • 发布:达内杨老师
  • 来源:达内

成都达内分享——行内元素水平居中,父级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%);

}

上一篇:3D文字跑马灯特效代码分享
下一篇:顶部滚动视觉差特效代码
选择城市和中心
贵州省

广西省

海南省