各种居中方式小记

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%);}

参考:www.qianduan.net/css-to-achieve-the-vertical-center-of-the-five-kinds-of-methods.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 9,715评论 0 8
  • 1.绝对定位居中技术 我们一直用margin:auto实现水平居中,而一直认为margin:auto不能实现垂直居...
    DecadeHeart阅读 1,631评论 0 3
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,831评论 1 92
  • 巴德维医生(Dr.Joanna Budwig)是德国最杰出的生化学家。1951年,巴德维医生发明了神奇的治癌防癌方...
    七玲鸟阅读 1,868评论 0 0
  • 美好的时光过得真快呀, 转眼间,我从一个小宝宝变成了一个小姑娘。 美好的时光过的真快呀, 我的衣服变小了。 我想抓...
    米米的米米阅读 406评论 1 1