css垂直居中的6种方法

时间：2020-04-05 20:44:36 阅读：88 评论：0 收藏：0 [点我收藏+]

标签：css垂直居中 ali dir ext relative self display pre inline

1、通过verticle-align:middle实现CSS垂直居中。

通过vertical-align:middle实现CSS垂直居中是最常使用的方法，但是有一点需要格外注意，vertical生效的前提是元素的display：inline-block。

 1 .parents{
 2 　　background:#ff6600;
 3 　　height:300px;            
 4 }
 5 .children{
 6 　　background:#ff0000;
 7 　　widht:50%;
 8 　　height:50%;
 9 　　display:inline-block;
10 　　vertical-align:middle;
11 }

2、通过display:flex实现CSS垂直居中。

随着越来越多浏览器兼容CSS中的flexbox特性，所以现在通过“display:flex”实现CSS水平居中的方案也越来越受青睐。

通过display:flex实现CSS垂直居中的方法是给父元素display:flex;而子元素align-self:center;

这个跟CSS水平居中的原理是一样的，只是在flex-direction上有所差别，一个是row(默认值)，另外一个是column。

 1 .parents{
 2 　　background:#ff6600;
 3 　　width:300px;
 4 　　height:300px;
 5 　　display:flex;
 6 }
 7 .children{
 8 　　background:#ff0000;
 9 　　width:100px;
10 　　height:100px;
11 　　align-self:center;
12 }

3、通过伪元素:before实现CSS垂直居中。

具体方式是为父元素添加伪元素:before，使得子元素实现垂直居中。

 1 .parents{
 2  　　background:#ff6600;
 3  　　width:300px;
 4  　　height:300px;
 5  　　display:block;
 6  }
 7 .parents:before{
 8 　　content:‘‘;
 9 　　display:inline-block;
10 　　vertical-align:middle;
11 　　height:100%;
12 }
13 .children{
14 　　background:#ff0000;
15 　　width:100px;
16 　　height:100px;
17 　　display:inline-block;
18 　　vertical-align:middle;
19 }

4、通过display:table-cell实现CSS垂直居中。

给父元素display:table，子元素display：table-cell的方式实现CSS垂直居中。

 1 .parents{
 2 　　background:#ff6600;
 3 　　width:300px;
 4 　　height:300px;
 5 　　display:table;
 6 }
 7 .children{
 8 　　background:#ff0000;
 9 　　width:100px;
10 　　height:100px;
11 　　display:table-cell;
12 　　vertical-align:middle; 
13 }

5、已知父元素高度通过transform实现CSS垂直居中。

给子元素的position:relative/absolute，再通过translateY即可定位到垂直居中的位置。

 1.parents{
 2　　background:#ff6600;
 3　　width:300px;
 4　　height:300px;
 5}
 6 .children{
 7　　background:#ff0000;
 8　　width:50%;
 9　　height:50%;
10　　postion:relative/absolute;
11　　top:50%;
12　　transform:translateY(-50%);
13 }

6、通过line-height实现CSS垂直居中。

设置子元素的line-height值等于父元素的height，这种方法适用于子元素为单行文本的情况。

 1 .parents{
 2  　　background:#ff6600;
 3  　　width:300px;
 4  　　height:300px;
 5 }
 6 .children{
 7  　　background:#ff0000;
 8  　　width:100px;
 9  　　height:100px;
10  　　line-height:300px
11 }

css垂直居中的6种方法

标签：css垂直居中 ali dir ext relative self display pre inline

原文地址：https://www.cnblogs.com/rchi/p/12638556.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行