实现垂直居中对齐的几种方式

这里主要是记录下自己之前的笔记，如有错误还请指出！

    <!--子元素为行内元素水平垂直居中-->
    <div class="box">
        <span class="line">行内元素垂直居中</span>
    </div>

    <!-- 子元素为块级元素垂直居中 -->
    <div class="box2">
        <div class="box_con">块级元素</div>
    </div>
    
    <!-- 图片垂直居中 -->
    <div class="box3">
        <img src="../img/logo.png" alt=""  title="我是块级元素img">
    </div>
    
    <!-- 多行文本垂直居中，了解一下 -->
    <div class="box4">
        <p class="son">天边的最后一抹斜阳，黯淡了，无尽的黑暗将要袭来。我陷入了沉思中去。
            日子一天一天地逝去，从满心不甘至无可奈何，最终落得个与世诀别。即使再不愿，也抵不过光阴的蹉跎，岁月的无情。似一支锋利的针，刺的多了，也便感觉不到疼了。只眼睁睁地盯着指里浸出的血红，一滴，一滴，禁锢了世界。
            “最是人间留不住，朱颜辞镜，花辞树。”从落地开始，便踏入一个无法回头的路程，通往世界的那头。无法静止，无法再来，上天仅予了世人一次机会，一次，不可多得、万般珍贵的机会。
            当然，现在的你，或许是豆蔻年华的少年，性格作风间，满是少年的意气风发，锋芒毕露，好比“少年不识愁滋味，爱上层楼，爱上层楼”“左牵黄，右擎苍”；或是初来乍到的中年人，不必前者，中年人，更加成熟稳重了，当然，也添了更多的责任，有自己的信念，需要去守护。但，时光流逝的匆匆，就有了“无可奈何花落去，似曾相识燕归来”的诗句；又或是已生皱纹，苍苍白发的老人，届时，离路程的尽头，离结束不远了。更多的，也是释然。“高堂明镜悲白发，朝如青丝暮成雪。”操劳了一生，也要停止了。
        </p>
    </div>

 

<style>
        *{
            margin: 0;
            padding: 0;
        }
        /* 子元素为行级 */
        .box{
            width: 200px;
            height: 200px;
            background-color: #f60;
            margin: 20px 50px;
            /* display: flex;
            justify-content: center;
            align-items: center; */  /* flex方式 */
            text-align: center;
            display: table-cell;
            vertical-align: middle;  /* 转为table-cell方式 */
            /* line-height: 200px; */  /* 利用line-height方式 */
        }
        .line{
            background-color: #00BFFF;
        }
        /* 子元素为块级 */
        .box2{
            width: 200px;
            height: 200px;
            background-color: #C63D01;
            margin: 20px 50px;
            overflow: hidden;
            text-align: center;
            /* position: relative; */
            /* display: flex;
            justify-content: center;
            align-items: center; 利用flex方式*/
        }
        .box_con{
            width: 50px;
            height: 50px;
            background-color: #08BDEB;
            margin: 74.5px auto;
            /* position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -25px;
            margin-top: -25px; 利用绝对定位+负的margin*/  
        }
        
        /* 图片垂直居中 */
        .box3{
            width: 300px;
            height: 300px;
            background-color: #7FFFD4;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        
        /* 多行文本垂直居中 */
        .box4{
            width: 800px;
            height: 600px;
            background-color: #FA8072;
            margin-top: 20px;
            text-align: center;
            display: table;
            padding: 150px;
            box-sizing: border-box;
        }
        .son{
            display: table-cell;
            vertical-align: middle;
            background-color: #08BDEB;
        }
</style>