(史上最全)div居中的几种方法
效果图:
内部 div 要有宽度
父元素设置为:position: relative; 子元素设置为:position: absolute; 距上50%,据左50%,然后减去元素自身宽度的一半距离就可以实现
效果图:
如果元素未知宽度,只需将上面例子中的替换为:
效果图:
效果图:
效果图:
table 实现垂直居中,子集元素可以是块元素,也可以不是块元素
行元素 text-align :center;
块元素 :margin :0 auto;
会使元素表现的类似一个表格中的单元格td,利用这个特性可以实现文字的垂直居中效果。同时它也会破坏一些 CSS 属性,使用 table-cell 时最好不要与 float 以及 position: absolute 一起使用,设置了 table-cell 的元素对高度和宽度高度敏感,对margin值无反应,可以响 padding 的设置,表现几乎类似一个 td 元素。
小结:宠物精灵连连看经典版
1. 不要与 float:left, position : absolute, 一起使用
2. 可以实现大小不固定元素的垂直居中
3. margin 设置无效,响应 padding 设置
4. 对高度和宽度高度敏感
5. 不要对 display:table-cell 使用百分比设置宽度和高度
效果图:王者荣耀女英雄去衣服
给父级设置 display : table,子集设置 display:tablecell ,子集会充满全屏
效果图:
中间的图片会随着外层容器的大小而自动水平垂直居中,其实原理和文字水平垂直居中一模一样
效果: