web开发笔记-垂直居中

简介

今天看了一遍大牛写的文章,他在文章中多次强调了基础的重要性,其中就有提到了垂直居中的多种写法,所以我打算记录几种的垂直居中的方案.顺便告诫自己,不要好高骛远,应不断的夯实基础,基础才是根本.文章的链接我也给大家列出来 . 2016年前端技术观察 ,有兴趣大家可以去看看.

内容

为了方便我先把总体样式列出,如下:

 .box {
            height: 200px;
            width: 200px;
            position: relative;
        }

.content {
            height: 100px;
            width: 100px;
            
        }

• 方案一(margin:auto)
  我们常用margin:0 auto;来设置已知宽高的块级元素的水平居中.其实margin:auto也可以设置垂直居中,但是还要做一些别的相关设置,才能使得其有效.代码:
  -css

 .margin-auto {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }

-html

-效果:

9BDC01D8-D14D-4875-9B0E-E85DE3517A8C.png

• 方案二 ( 使用transform垂直居中 )
  -css

.transform {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateY(-50%) translateX(-50%);
        }

-html

-效果

06BD4FFC-8182-4973-B2D5-BC6A34A10DFB.png

• 方案三 (设置margin为负值)

-css

 .margin-negative {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -50px;
            margin-top: -50px;
        }

-html

-效果

500F9346-F166-4AC5-8B39-0E502FA84D23.png

方案四 (使用display:table-cell)

-css

 .table-cell {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        
  .vertical-middle {
            display: inline-block;
        }

-html

-效果

7C62EC9C-C3A8-4453-AABE-1A9C70CB5CAE.png

• 方案五 (使用伪元素)

-css

 .line {
            text-align: center;
        }
        
.line::before {
            content: "";
            display: inline-block;
            width: 1px;
            height: 100%;
            background-color: white;
            vertical-align: middle;
        }
        
.line-after {
            vertical-align: middle;
            display:inline-block
        }

-html

-效果

371DD2E9-A931-41A4-93B1-8B764B929C92.png

• 方案六 (使用flex,伸缩布局)

这里要说一下,这是我比较喜欢的方式.唯一的遗憾就是有兼容性问题.
-css

 .flex {
            display: flex;
            justify-content: center;
            align-items: center;
        }

-html

-效果

3743C4D0-DE41-4538-B944-EEBF4B65A626.png

结束

好了,就介绍着几种方案,毕竟本人知识有限.最后来张全家福

9F0AD107-D8E5-41DC-8BAA-EC9106121D86.png