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;)
绝对定位元素居中:

  1. 已知父容器宽高:top:50%; left:50px; 负margin-left:宽度的一半;;负margin-top:高度的一半;
  2. 未知父容器宽高:相对于子元素自身transfor:translate(-50%,-50%)

未完待续

上一篇下一篇

猜你喜欢

热点阅读