CSS中常用的居中方式
2017-08-12 本文已影响0人
饥人谷_LEO
居中方式(水平,垂直)
在文档流中元素的居中
水平居中:
内联元素:
1.在父元素上设置“text-align=center”
块级元素:
1.如果定宽:设置margin-left:auto; margin-right:auto
2.如果不定宽:设置margin:0 120px;
垂直居中:
利用table标签嵌套 兼容性最好
内联元素:
1.在父元素上设置“padding:10px 0;和line-height”
2.切记不要在父元素上定高!!
3.在父元素上设置 padding:10px 0
4.在父元素上设置 line-height
块级元素:
1.在父元素上加 “padding:10px 0;”
inline-block垂直居中:伪元素垂直居中
不在文档流中的元素
浮动元素居中?
若强行居中则嵌套进一个块级元素中
1.清除浮动:.clearfix::after{content" ";display:block;clear:both;}
2.嵌套进一个inline-block元素内 多余像素使用( display:inline-block; vertical-align:top;)
绝对定位元素居中:
- 已知父容器宽高:top:50%; left:50px; 负margin-left:宽度的一半;;负margin-top:高度的一半;
- 未知父容器宽高:相对于子元素自身transfor:translate(-50%,-50%)
未完待续