垂直居中的所有方法

2017-07-26  本文已影响0人  安石0

要点1

不要写高度,.
.parent{
line-height:30px;
padding 15px 0;
}
要点2
搜索引擎
方法1
假设高度固定

table
tr
td
div
td
tr
table

方法2

div.parent
span span
div
div

span span
vertical:middle;display:inlinde;height:100%;
以上支持ie 5.5以上
方法3
绝对定位,child,top:50%;margin-top:负高度的一半
方法4(不支持ie8及以下)
child transform:tranlate(-50%,-50%)
不知道自己宽高也行
方法5
child
left:0
top:0
right:0
bottom:0
margin:auto
宽高指定
方法6
fleax垂直居中法
多个子元素
parent:display:flex
justify-content:center(水平居中)
align-items:center(垂直居中)

上一篇 下一篇

猜你喜欢

热点阅读