1. 只显示一行数据的话:
给容器设置height和line-height,并使两个值相等,再加上over-flow:hidden
.test{
  height:40px;
  line-height:40px;
  overflow:hidden;
}
优点:
1. 同时支持块级和内联极元素
2. 支持所有浏览器
缺点:
1. 只能显示一行
2. IE中不支持<img>等的居中
要注意的是:
1. 使用相对高度定义你的 height 和 line-height
2. 不想毁了你的布局的话,overflow: hidden 一定要

 

2.多行内容居中,且容器高度可变
给出一致的 padding-bottom 和 padding-top 就行
.test{
  padding-top:24px;
  padding-botton:24px;
}
优点:
1. 同时支持块级和内联极元素
2. 支持非文本内容
3. 支持所有浏览器
缺点:
容器不能固定高度

 

相关文章:

  • 2022-12-23
  • 2021-11-13
  • 2021-12-13
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2022-02-17
  • 2021-10-02
  • 2022-01-09
  • 2021-11-21
  • 2022-12-23
  • 2021-10-16
相关资源
相似解决方案