CSS 学习笔记(二)居中显示

在 CSS 布局中,居中显示是一个很重要也很常用的显示方式,居中显示分为水平居中和垂直居中,我这里写一些我现在所了解到的各种居中显示方式,以备后用。

水平居中

在实际工作中,水平居中是最常遇到的,我们先来看一下如何实现水平居中。

水平居中根据居中对象的不同分为两种情况:块级元素与行级元素(关于块级元素与行级元素的特性在 DOM 学习笔记(二) DOM 元素内有介绍),块级元素里面又分为定宽块级元素以及不定宽块级元素,他们实现水平居中的方式各不相同。

行级元素

行级元素实现水平居中的方式是为父元素设置 text-align:center 属性实现的,例如

1
2
3
4
5
6
<div>
<span>这个 span 元素不能居中显示</span>
</div>
<div style="text-align:center;">
<span>这个 span 元素可以居中显示</span>
</div>

上面的代码中,行级元素 span 的父元素拥有 text-align:center 属性,所以会水平居中显示。

其实,不仅仅是行级元素,内联块级元素与文本都可以通过这种方法实现水平居中效果。

定宽块级元素

定宽块级元素可以通过对其设置 margin: 0 auto 属性来实现水平居中效果,例如

1
2
3
4
5
6
7
8
<div>
<div style="width:100px;">
这个宽度固定的 div 元素不能居中显示
</div>
<div style="width:100px; margin:0 auto">
这个宽度固定的 div 元素可以居中显示
</div>
</div>

上面的代码中,拥有 margin: 0 auto 属性的宽度固定的块级元素可以实现居中显示。

不定宽块级元素

不定宽的块级元素可以通过两种方法实现居中显示:

1.为该元素添加 display:table-cell 属性和 margin: 0 auto 属性;

2.为该元素添加 display:inline 属性,之后为其父元素添加 text-align:center 属性

第一种方法是将其间接地转化为定宽元素,然后通过设置 margin: 0 auto 属性来获得水平居中显示效果,它借助了 table 标签的长度自适应特性,即不定义其长度也不为默认父元素的长度,而是根据其内文本长度决定;第二种方法通过将块级元素转化为行级元素,之后使用行级元素的居中方法实现水平居中效果,当然这里的 display:inline 属性也可以改为 display:inline-block 属性。推荐使用第二种方法。


注意:第一种方法我自己在使用过程中遇到了一些问题,引起这些问题的原因可能是设置元素的 display:table-cell 属性以后,破坏了元素原本的显示形态,导致另外一些该元素原有的属性在 display:table-cell 属性下被限制或失效,使用过程中应当避免这些问题的出现。


垂直居中

垂直居中是另外一种比较常用的居中方式,它的实现方式可以分为两种情况:父元素高度确定的单个元素或单行文本与父元素高度确定的多个元素或多行文本。

单个元素与单行文本

父元素高度确定的单个元素与单行文本的垂直居中的方法是通过设置父元素的 height 与 line-height 高度一致实现的,例如

1
2
3
4
5
6
<div style="height:100px;">
<h1>这个父元素高度固定的 h1 元素不能垂直居中</h1>
</div>
<div style="height:100px; line-height:100px;">
<h1>这个父元素高度固定的 h1 元素可以垂直居中</h1>
</div>

上面的代码中,通过为 h1 元素的父元素设置相同的高度与行高,就可以实现垂直居中效果。但如果内容产生了换行,即内容为多个元素、块级元素或多行文本时,这个方法就不可用了。除此之外,使用这种方法需要注意一下元素的 font-size 属性,因为 line-height 属性与其有很大关系,在字体大小不同的情况下,行高的值所代表的具体大小也会发生变化,因为在使用上面的方法为元素设置垂直居中时,可以顺带设置一下元素的 font-size 属性,来保证样式的正常显示。

多个元素与多行文本

这种情况下可以对其父元素设置 display:table-cell 属性和 vertical-align:middle 属性来实现垂直居中效果,例如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div style="height:200px;">
<h1>这些父元素高度固定的 h1 元素不能垂直居中</h1>
<h1>这些父元素高度固定的 h1 元素不能垂直居中</h1>
<h1>这些父元素高度固定的 h1 元素不能垂直居中</h1>
<h1>这些父元素高度固定的 h1 元素不能垂直居中</h1>
<h1>这些父元素高度固定的 h1 元素不能垂直居中</h1>
<h1>这些父元素高度固定的 h1 元素不能垂直居中</h1>
</div>
<div style="height:200px; display:table-cell; vertical-align:middle;">
<h1>这些父元素高度固定的 h1 元素可以垂直居中</h1>
<h1>这些父元素高度固定的 h1 元素可以垂直居中</h1>
<h1>这些父元素高度固定的 h1 元素可以垂直居中</h1>
<h1>这些父元素高度固定的 h1 元素可以垂直居中</h1>
<h1>这些父元素高度固定的 h1 元素可以垂直居中</h1>
<h1>这些父元素高度固定的 h1 元素可以垂直居中</h1>
</div>

上面的代码中,父元素设置了 display:table-cell 属性和 vertical-align:middle 属性的众多h1元素可以垂直居中显示,其实,设置了 display:table-cell 属性的元素默认含有 vertical-align:middle 属性,所以在这里可以将 vertical-align:middle 属性省略不写,一样可以实现垂直居中显示效果。


注意:这种方法与上面所说的为不定宽块级元素设置水平居中的方法存在相同的问题,都是由于为元素设置 display:table-cell 属性导致的,这个 CSS 属性具有破坏性(我个人是这么觉得的),所以在为元素设置该属性时一定要小心谨慎,防止因为设置该属性导致元素原本的固有属性失效,从而破坏 CSS 布局的现象出现。