在平时编写网页的过程中,元素居中应该是网页布局中非常常见的一种CSS效果。对于元素居中常见的有这三种:水平居中、垂直居中、水平垂直居中。
对于块级元素的水平居中,我们常常借助marin: 0 auto;来实现;对于行内块元素,我们常常借助text-align: center;来实现。简单说来,元素的水平居中并不困难。
在平时编写网页的过程中,元素居中应该是网页布局中非常常见的一种CSS效果。对于元素居中常见的有这三种:水平居中、垂直居中、水平垂直居中。
对于块级元素的水平居中,我们常常借助marin: 0 auto;来实现;对于行内块元素,我们常常借助text-align: center;来实现。简单说来,元素的水平居中并不困难。
元素的垂直居中应该是相对较难的一种。在垂直居中中,我们最常见的一个需求就是文字垂直居中。对于文字垂直居中,我们通常都是将行高和元素的高保持一致来实现文字垂直居中。但是这种方法有一个致命的缺陷,就是元素高度需要提前知道。同时,这种方法也有一个弊端,就是当元素的高度发生改变时,需要我们手动去修改行高。虽然这种情况不常出现,但是确不够灵活。
可能正是由于这个原因,所以在CSS3中新增了flex布局。相比较于行高的方式,flex最大的优点就是我们不需要提前知道元素的高度,这也就保证了元素的高度在发生变化后不需要进行二次修改。
通常我们都是给元素设置如下样式:display: flex; align-items: center; height: inherit;来达到元素的垂直居中。
在水平居中、垂直居中、水平垂直居中这三种常见的居中方式中,以水平垂直居中最难。
如果让一个已知宽高的元素(如:宽、高各200px)水平垂直居中,常见的方式如下:
方法一:要居中元素的父级添加相对定位,要居中元素设置绝对定位,然后将left和top值设置为50%,最后通过margin-left负宽度的一半,margin-top负高度的一半即可。
- E {
- position: relative;
- }
- E F {
- position: absolute;
- left: 50%;
- top: 50%;
- width: 200px;
- height: 200px;
- margin: -100px 0 0 -100px;
- }
方法二:要居中元素的父级添加相对定位,要居中元素设置绝对定位,然后将left、top、right、bottom设置为0,最后设置margin: auto;即可。
- E {
- position: relative;
- }
- E F {
- position: absolute;
- left: 0;
- top: 0;
- rightright: 0;
- bottombottom: 0;
- width: 200px;
- height: 200px;
- margin: auto;
- }
对于一个未知宽高元素水平垂直居中,这个难度系数就相当高了。不过在CSS3出现后,这些都变成了“小儿科”。
方法一:要居中元素的父级盒模型设置为flex,并且有明确高度。
- E {
- display: flex;
- justify-content: center;
- align-items: center;
- height: 100%;
- }
方法二:要居中元素的父级添加相对定位,要居中元素设置绝对定位,然后将left和top值设置为50%,最后设置transform: translate3d(-50%, -50%, 0);即可。
- E {
- position: relative;
- }
- E F {
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translate3d(-50%, -50%, 0);
- }
就个人习惯而言,在不考虑低版本浏览器的情况下,建议使用最后一种方法做元素的水平垂直居中,这样能省去很多不必要的麻烦。