各种居中方式小记

1.单行内容的居中

.middle-demo-1{
height: 4em;
line-height: 4em;
overflow: hidden;
}

2.父元素未设置高度,内容居中 

.middle-demo-2{
padding-top: 24px;
padding-bottom: 24px;
}

3.子元素有固定高度,使用绝对定位的 div,把它的 top 设置为 50%,top margin 设置为负的 content 高度。

#content {
position:absolute;
top:50%;
height:240px;
margin-top:-120px; /* negative half of the height */
}

4.使用表格的 vertical-align property 属性

#wrapper {display:table;}
#cell {display:table-cell; vertical-align:middle;}

5.子元素 position:absolute,有固定宽度和高度

#content {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
height:240px;
width:70%;
}

6.使用css3的translate

css{position:absolute; top:50%;left:50%;transform:translate(-50%,-50%);}

 

<摘自:春华秋实>

posted @ 2015-11-08 20:24  爱好和平的阿道夫  阅读(161)  评论(0编辑  收藏  举报