小柒

www.xiaoqi.cn

0%

实现水平垂直居中

发表于 更新于 分类于

我们在布局一个页面时，通常都会用到水平居中和垂直居中，处理水平居中很好处理，不外乎就是设定margin:0 auto;或是text-align:center;,就可以轻松解决掉水平居中的问题，但一直以来最麻烦对齐问题就是「垂直居中」，以下将介绍几种单纯利用CSS垂直居中的方式，只需要理解背后的原理就可以轻松应用。

下面为公共代码：

1
2
3
4
5
6
7
8
9
10
11
12
<div class="box">
    <div class="small">small</div>
</div>
.box {
    width: 300px;
    height: 300px;
    background: #ddd;
}
.small {
    background: red;
}

absolute + margin实现

方法一：

1
2
3
4
5
6
7
8
9
10
11
.box {
    position: relative;
}
.small {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -50px;
    width: 100px;
    height: 100px;
}

方法二：

margin:auto会自动去计算子元素和父元素之间的边距，并设为居中。所以就会实现上下左右都居中。

1.在普通内容流中，margin:auto的效果等同于margin:0 auto,左右会去极端剩余空间平均分配，而上下默认都为0；

2.position:absolute使绝对定位块跳出了内容流，内容流中的其余部分渲染时绝对定位部分不进行渲染。

3.为块区域设置top: 0; left: 0; bottom: 0; right: 0;将给浏览器重新分配一个边界框，此时该块将填充其父元素的所有可用空间，所以margin 垂直方向上有了可分配的空间。

4.再设置margin 垂直方向上下为auto，即可实现垂直居中。（注意高度得设置）。

1
2
3
4
5
6
7
8
9
10
11
12
13
.box {
    position: relative;
}
.small {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100px;
    height: 100px;
}

absolute + calc 实现

1
2
3
4
5
6
7
8
9
10
.box {
    position: relative;
}
.small {
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    width: 100px;
    height: 100px;
}

absolute + transform 实现

1
2
3
4
5
6
7
8
9
10
11
12
.box {
    position: relative;
}
.small {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
    width: 100px;
    height: 100px;
}

转行内元素

1
2
3
4
5
6
7
8
9
10
11
.box {
    line-height:300px;
    text-align: center;
}
.small {
    padding: 6px 10px;
    display:inline-block;
    font-size:16px;
    vertical-aligin: middle;
    line-height: 16px;
}

vertical-align:

在W3C官方中对 vertical-align做了下面的解释：
This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.
事实上，一个Box中由很多行很多元素组成，vertical-align只作用于在同一行内的元素，它的垂直并不是相对于整个Box而言的。如果把 vertical-align:middle 放到一个单元格元素，即table的td元素中，它的垂直居中显示是没任何问题的，因为它表示相对于改行的垂直高度居中显示。而在我设定的div块中并不只存在一行，因此它无法识别默认显示在顶部。

为了解决这个问题，我找到了两种方法。一个是我们可以设置元素style中的 line-heght 值为其父元素

的height值
，这样 vertical-align:middle 就会使元素内容垂直居中。 另外还有种方法，就是将要设置垂直居中的元素的父元素style属性添加 display:table-cell 将其作为单元格显示，这样使用 vertical-align:middle 也可以实现垂直居中

转行内元素并且使用table-cell

1
2
3
4
5
6
7
8
9
10
11
12
13
.box {
       display: table-cell;
       height: 300px;
       width: 300px;
       text-align: center;
       background: green;
       vertical-align: middle;
   }
   .small {
       padding: 6px 10px; 
       display:inline-block;
       background-color: aliceblue;
   }

flex

方法一：

1
2
3
4
5
.box {
    display: flex;
    justify-content: center;
    align-items: center;
}

方法二：

1
2
3
4
5
6
7
.box {
    display: flex;
    justify-content: center;
}
.small {
    align-self: center;
}

grid布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.box {
        display: grid;
        height: 300px;
        width: 300px;
        justify-items: center;
        align-items: center;
        background-color: #000;

    }
    .small {
       width: 100px;
       height: 100px;
        background-color: #fff;
    }

方法二：

1
2
3
4
5
6
7
.box {
    display: grid;
}
.small {
    justify-self: center;
    align-self: center;
}

方法三：

1
2
3
4
5
6
7
8
.box {
    display: grid;
    justify-items: center;
}
.small {
    align-self: center;
}

方法四：

1
2
3
4
5
6
7
.box {
    display: grid;
    align-items: center;
}
.small {
    justify-self: center;
}