CSS网页布局:div垂直居中的各种方法
操作方法
- 01
一、单行内容的居中 只考虑单行是最简单的,无论是否给容器固定高度,只要给容器设置 line-height 和 height,并使两值相等,再加上 over-flow: hidden 就可以了 .middle-demo-1{height: 4em;line-height: 4em;overflow: hidden;} 优点:1. 同时支持块级和内联极元素2. 支持所有浏览器缺点:1. 只能显示一行2. IE中不支持<img>等的居中要注意的是:1. 使用相对高度定义你的 height 和 line-height2. 不想毁了你的布局的话,overflow: hidden 一定要 二、多行内容居中,且容器高度可变也很简单,给出一致的 padding-bottom 和 padding-top 就行 优点:1. 同时支持块级和内联极元素2. 支持非文本内容3. 支持所有浏览器缺点:容器不能固定高度
赞 (0)