CSS处理元素居中
0.水平居中
元素水平居中需求比较常见,常见的做法是通过margin来完成。
元素默认的margin-left和margin-right应该都是0。
而元素水平居中其实只需要把margin-left和margin-right都设置成auto就可以了。
1 2 3 4 |
<span class="hljs-selector-class">.demo</span> { <span class="hljs-attribute">margin-left</span>:auto; <span class="hljs-attribute">margin-right</span>:auto; } |
网上有一种常见的写法是:
1 2 3 |
<span class="hljs-selector-class">.demo</span> { <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span> auto; } |
这样写简短些,不过在设置margin-left和margin-right为auto时,也设置了margin-top和margin-bottom为0。
1.垂直居中
垂直居中做起来比较麻烦,常见的一种方法是通过vertical-align:middle来实现。
可是vertical-align的效用很奇怪,居然是让兄弟元素向自己对齐(居然是作用在别的元素身上)。
下面使用 伪类:first-child 和 伪元素:before 配合vertical-align实现垂直居中:
1 2 3 4 5 6 7 8 9 10 11 |
<span class="hljs-selector-class">.demo-parent</span> > * { <span class="hljs-attribute">display</span>: inline; <span class="hljs-attribute">vertical-align</span>:middle; } <span class="hljs-selector-class">.demo-parent</span><span class="hljs-selector-pseudo">:first-child</span><span class="hljs-selector-pseudo">:before</span> { <span class="hljs-attribute">content</span>: <span class="hljs-string">""</span>; <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>; <span class="hljs-attribute">display</span>:inline-block; <span class="hljs-attribute">vertical-align</span>:middle; } |
0.由于vertical-align作用于“同行”兄弟元素,所以兄弟元素至少是display:inline这样可共行的。由于是相互对其,所以也需要vertical-align属性。
1.由于vertical-align对齐是以自己的高度做参照,伪元素height:100%是为了和父元素一样宽,display:inline-block是使内容为空的该伪元素可以有高度。
2.注意vertical-align其实是一个伪元素的属性,并非demo-parent的。
demo-parent的子元素由于这个兄弟伪元素而垂直居中。
前提是同行,如果元素被挤到下一行,这个伪元素的vertical-align并不对其起作用。