CSS居中问题探索

在页面布局中,居中在各种各样的场景中广泛被用到,也经常被新人提及。以前做过一些自己探索居中问题的demo,今天翻出来了,正好做一下笔记,记录一下。以后遇到问题也能快速方便快速找到。

居中包括水平居中垂直居中两种,其中水平居中相对来说容易解决,但是垂直居中有时就令人头疼了,其实也不是很难。各自都有很多方式来实现,本文主要是总结一下自己以前的demo,并不代表主流方式。另外先打个预防针,下面的例子很丑,以前做的,勿喷。

水平居中

说到水平居中,你可能立马想到的是text-align:center;或者margin:0 auto;这是最简单的水平居中方式,也是使用很广泛的水平居中方法。我们来探索一下,他俩居中能力到底有多强?

text-align:center水平居中

  1. 对直接文本子元素进行居中
    1
    2
    3
    <div style="width:200px;height:100px;background:#555;text-align:center">
    利用text-align对本元素文字水平对齐
    </div>

利用text-align对本元素文字水平对齐

  1. 对子div元素水平对齐
    1
    2
    3
    4
    5
    <div style="width:300px;height:300px;background:#555;text-align:center">
    <div style="width:200px;height:100px;border:1px dotted blue;background:#f00;">
    利用text-align对子div元素水平对齐
    </div>
    </div>

利用text-align对子div元素水平对齐

  1. 对子span元素水平对齐
    1
    2
    3
    4
    5
    <div style="width:300px;height:300px;background:#555;text-align:center">
    <span style="background:#f00;">
    利用text-align对子span元素水平对齐
    </span>
    </div>

利用text-align对子span元素水平对齐

  1. 对设置了inline的div元素水平对齐
    1
    2
    3
    4
    5
    <div style="width:300px;height:300px;background:#555;text-align:center">
    <div style="display:inline;width:200px;height:100px;border:1px dotted blue;background:#f00;">
    设置了inline的div元素水平对齐
    </div>
    </div>

设置了inline的div元素水平对齐

  1. 对设置了inline-block的div元素水平对齐
    1
    2
    3
    4
    5
    <div style="width:300px;height:300px;background:#555;text-align:center">
    <div style="display:inline;width:200px;height:100px;border:1px dotted blue;background:#f00;">
    设置了inline-block的div元素水平对齐
    </div>
    </div>

设置了inline-block的div元素水平对齐

小结
text-align:center具有继承性,可以使文本元素以及子元素的文本水平居中,也可以使行内元素(或者设置了display:inline/inline-block属性的块状元素)水平居中,但不能使块状元素居中。

margin:0 auto水平居中

  1. 对直接子元素进行水平居中
    1
    2
    3
    <div style="width:200px;height:100px;background:#555;margin: 0 auto;">
    利用margin:0 auto对文字水平对齐
    </div>

利用margin:0 auto对文字水平对齐

  1. 对自身div元素水平对齐
    1
    2
    3
    4
    5
    <div style="width:300px;height:300px;background:#555;">
    <div style="width:200px;height:100px;border:1px dotted blue;background:#f00;margin: 0 auto;">
    利用margin:0 auto对自身div元素水平对齐
    </div>
    </div>

利用margin:0 auto对自身div元素水平对齐

  1. 对自身div元素水平对齐,自身元素文本宽度未知
    1
    2
    3
    4
    5
    <div style="width:300px;height:300px;background:#555;">
    <div style="height:100px;border:1px dotted blue;background:#f00;margin: 0 auto;">
    利用margin:0 auto对自身div元素水平对齐,自身元素文本宽度未知
    </div>
    </div>

对自身div元素水平对齐,自身元素文本宽度未知

  1. 对自身span元素水平对齐
    1
    2
    3
    4
    5
    <div style="width:300px;height:300px;background:#555;">
    <span style="background:#f00;margin: 0 auto;">
    对自身span元素水平对齐
    </span>
    </div>

利用margin:0 auto对自身span元素水平对齐

  1. 对设置了block的span元素水平对齐
    1
    2
    3
    4
    5
    <div style="width:300px;height:300px;background:#555;">
    <span style="width:200px;height:100px;display:block;background:#f00;margin: 0 auto;">
    设置了block的span元素水平对齐
    </span>
    </div>

利用margin:0 auto对设置了block的span元素水平对齐

  1. 对设置inline的div元素水平对齐
    1
    2
    3
    4
    5
    <div style="width:300px;height:300px;background:#555;">
    <div style="display:inline;height:100px;border:1px dotted blue;background:#f00;margin: 0 auto;">
    设置inline的div元素水平对齐
    </div>
    </div>

利用margin:0 auto对设置inline的div元素水平对齐

  1. 对设置inline-block的div元素水平对齐
    1
    2
    3
    4
    5
    <div style="width:500px;height:300px;background:#555;">
    <div style="display:inline;height:100px;border:1px dotted blue;background:#f00;margin: 0 auto;">
    设置inline-block的div元素水平对齐
    </div>
    </div>

利用margin:0 auto对设置inline-block的div元素水平对齐

小结

margin:0 auto;没有继承性,只能使已知宽度的块状元素水平居中,且该块状元素为其本身。

除了以上margin:0 auto;水平居中方式之外还有可以使用postion配合margin或者transform来实现块状盒子水平居中的目的。

position配合margin或者transform水平居中

  1. 对已知宽度的div元素盒子水平对齐
    1
    2
    3
    4
    5
    <div style="width:600px;height:300px;background:#555;position:relative">
    <div style="width:100px;height:100px;background:#f00;position:absolute;left:300px;margin-left:-50px">
    对已知宽度的div元素盒子水平对齐
    </div>
    </div>

对已知宽度的div元素盒子水平对齐

  1. 对未知宽度的div元素盒子水平对齐
    1
    2
    3
    4
    5
    <div style="width:600px;height:300px;background:#555;position:relative">
    <div style="background:#f00;position:absolute;left:300px;transform: translate(-50%,0);">
    对未知宽度的div元素盒子水平对齐
    </div>
    </div>

对未知宽度的div元素盒子水平对齐

小节
这种方式的水平居中,既可以是父元素已知宽度,也可以是父元素未知宽度,分别对应margin和transform。

垂直居中

line-height 垂直居中

垂直居中时间很麻烦的事情,我们知道可以使用line-height=height可以使单行文本在父元素内垂直居中,这个很容易实现。

1
2
3
<div style="width:500px;height:100px;background:#555;line-height:100px">
利用line-height=height对单行文本在父元素内垂直居中
</div>

利用line-height=height对单行文本在父元素内垂直居中

那么line-height=height;能不能使其他元素水平居中呢?我们来试一试:

  1. 对子div元素盒子垂直对齐
    1
    2
    3
    4
    5
    <div style="width:600px;height:300px;background:#555;line-height:300px">
    <div style="width:500px;height:100px;background:#f00;">
    利用line-height=height对div元素盒子垂直对齐
    </div>
    </div>

 利用line-height=height对div元素盒子垂直对齐

  1. 对子span元素盒子垂直对齐
    1
    2
    3
    4
    5
    <div style="width:600px;height:300px;background:#555;line-height:300px">
    <span style="background:#f00;">
    利用line-height=height对子span元素盒子垂直对齐
    </span>
    </div>

 利用line-height=height对子span元素盒子垂直对齐

  1. 设置了inline的div元素盒子垂直对齐
    1
    2
    3
    4
    5
    <div style="width:600px;height:300px;background:#555;line-height:300px">
    <div style="background:#f00;display:inline">
    设置了inline的div元素盒子垂直对齐
    </div>
    </div>

 利用line-height=height对设置了inline的div元素盒子垂直对齐

  1. 设置了inline-block的div元素盒子垂直对齐
    1
    2
    3
    4
    5
    <div style="width:600px;height:300px;background:#555;line-height:300px">
    <div style="background:#f00;display:inline-block">
    设置了inline-block的div元素盒子垂直对齐
    </div>
    </div>

 利用line-height=height对设置了inline-block的div元素盒子垂直对齐

小结
line-weight:height具有继承性,可以使文本元素以及子元素的文本垂直居中,也可以使行内元素(或者设置了display:inline属性的块状元素)垂直居中,但不能使块状元素(或设置了display:inline-block属性的块状元素)居中。

position配合margin或者transform

  1. 对已知高度div元素盒子垂直对齐
    1
    2
    3
    4
    5
    <div style="width:600px;height:300px;background:#555;position:relative">
    <div style="width:100px;height:100px;background:#f00;position:absolute;top:50%;margin-top:-50px">
    利用position对已知高度div元素盒子垂直对齐
    </div>
    </div>

 利用position对已知高度div元素盒子垂直对齐

  1. 对未知高度span元素盒子垂直对齐
    1
    2
    3
    4
    5
    <div style="width:600px;height:300px;background:#555;position:relative">
    <span style="background:#f00;position:absolute;top:50%;transform: translate(0,-50%);">
    利用position对未知高度span元素盒子垂直对齐
    </span>
    </div>

 利用position对未知高度span元素盒子垂直对齐

小结
同样,利用很牛X的position配合margin或者transform来使已知高度或者未知高度的元素进行垂直居中。

垂直水平居中

垂直水平居中就是对上面两种居中方式的综合利用,不在解释,直接上例子:

  1. 对已知宽高的div元素盒子垂直水平对齐
    1
    2
    3
    4
    5
    <div style="width:600px;height:300px;background:#555;position:relative">
    <div style="width:100px;height:100px;background:#f00;position:absolute;left:50%;top:50%;margin-left:-50px;margin-top:-50px">
    利用position和margin对已知宽高的div元素盒子垂直水平对齐
    </div>
    </div>

 对已知宽高的div元素盒子垂直水平对齐

  1. 对未知宽高div元素盒子垂直水平对齐
    1
    2
    3
    4
    5
    <div style="width:600px;height:300px;background:#555;position:relative">
    <div style="background:#f00;position:absolute;left:50%;top:50%;transform: translate(-50%,-50%);">
    利用position和margin对未知宽高div元素盒子垂直水平对齐
    </div>
    </div>

 对未知宽高div元素盒子垂直水平对齐

  1. 利用left:0;top:0;bottom:0;right:0;margin:auto对盒子垂直水平对齐
    1
    2
    3
    4
    5
    <div style="width:600px;height:300px;background:#555;position:relative">
    <div style="width: 200px;height:100px;background:#f00;position:absolute;left:0;top:0;bottom:0;right:0;margin:auto">
    利用left:0;top:0;bottom:0;right:0;margin:auto对盒子垂直水平对齐
    </div>
    </div>

 利用left:0;top:0;bottom:0;right:0;margin:auto对盒子垂直水平对齐

  1. 利用display:table-cell;vertical-align:middle;text-align:center;对inline-block盒子垂直水平对齐
    1
    2
    3
    4
    5
    <div style="width:600px;height:300px;background:#555;display:table-cell;vertical-align:middle;text-align:center">
    <div style="width: 200px;height:100px;background:#f00;vertical-align:middle;display:inline-block">
    利用display:table-cell;vertical-align:middle;text-align:center;对inline-block盒子垂直水平对齐
    </div>
    </div>

 利用display:table-cell;vertical-align:middle;text-align:center;对inline-block盒子垂直水平对齐

测试功能而已,你非要赏点我就没办法了...