JSFiddle - React, Tailwind, and code Playground

by Alex Liu

HTML

<div class="v-tc">
    <div class="vertical">1：table-cell居中</div>
</div>

<div class="v-ib">
    <div class="vertical">2：inline-block和vertical-align居中</div>
</div>

<div class="v-rm">
    <div class="vertical">3：relative和absolute居中</div>
</div>

<div class="v-ra">
    <span>4：固定高度居中（图片相当于指定了高度）</span>
    <img class="vertical" src="http://img.bizhi.sogou.com/images/2013/01/31/330620.jpg" width="100" height="67" />
    <!-- <div class="vertical">
    </div> -->
</div>

<div class="v-tr">
    <div class="vertical">5：translateY居中</div>
</div>
<!-- <div class="v-tr2">
    <div class="vertical">
        10: translateY居中2
    </div>
</div> -->

<div class="v-f">
    <div class="vertical">6：flex居中</div>
</div>
<div class="v-f2">
    <div class="vertical">7：flex居中2</div>
</div>

<div class="v-ib2">
    <div class="vertical">8：inline-block居中</div>
</div>
<div class="v-p">
    <a class="vertical">9：单行padding居中</a>
</div>


<div class="v-bg">
    10：背景居中
</div>

SCSS

[class^=v-]{
            height: 200px;
            border: 1px solid blueviolet;
            margin-bottom: 50px;
        }

        .v-tc{
            display: table;
        }
        .v-tc .vertical{
            display: table-cell;
            vertical-align: middle;
        }

        .v-ib:before{
            content: '';
            font-size: 0;
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }
        .v-ib .vertical{
            display: inline-block;
        }

        .v-rm{
            position: relative;

        }
        .v-rm .vertical{
            position: absolute;
            top: 50%;
            height: 50px;
            margin-top: -25px;
        }

        .v-ra{
            position: relative;
        }
        
        .v-ra .vertical{
            position: absolute;
            left:0; 
            top:0;
            right:0;
            bottom:0;
            margin: auto;
        }

        .v-tr{

        }
        .v-tr .vertical{
            position: relative;
            top: 50%;
            transform:translateY(-50%);
        }

        .v-f{
            display: flex;
            align-items: center;
        }
        .v-ib2{
            line-height: 200px;
        }
        .v-ib2 .vertical{
            line-height: normal;
            display: inline-block;
            vertical-align: middle;
        }

        .v-p{
            height: auto;
            padding: 50px;
        }

        .v-f2{
            display: flex;
            flex-direction:column;
            justify-content:center;
        }

        /* .v-tr2 .vertical{
            margin-top: 50%;
            transform: translateY(-50%)
        } */

        .v-bg{
            background: url("http://img.bizhi.sogou.com/images/2013/01/31/330620.jpg") no-repeat center/100px;
        }