鏈煡瀹介珮鐨刣iv姘村钩鍨傜洿灞呬腑

Posted 2020-11-13

鏍囩锛?a href='http://www.mamicode.com/so/1/.so' title='.so'>.so   ems   middle   nsf   orm   isp   height   round   ali   

鏈煡瀹藉害鐨刣iv浣垮唴瀹规按骞冲瀭鐩村眳涓?br>
鏂规硶涓€锛氫娇鐢╠isplay锛歠lex锛沯ustify-content:center;align-items: center;灞炴€?/strong>
浠ｇ爜濡備笅锛?br><style>
    #box{
        display: flex;
        justify-content:center;
        align-items: center;
        height: 500px;
    }
</style>
<div id="box">
    姘村钩鍨傜洿灞呬腑
</div>

鏂规硶浜岋細浣跨敤transform: translate(-50%, -50%);灞炴€?/span>
浠ｇ爜濡備笅锛?br><style>
銆€銆€#box{
銆€銆€銆€銆€position: absolute;
銆€銆€銆€銆€top:50%;
銆€銆€銆€銆€left:50%;
銆€銆€銆€銆€transform: translate(-50%,-50%);
銆€銆€}
</style>
<div id="box">
銆€銆€姘村钩鍨傜洿灞呬腑
</div>

鏂规硶涓夛細浣跨敤display锛歵able灞炴€?/span>
浠ｇ爜濡備笅锛?br><style>
    .parent{
        display: table;
        width: 300px;
        height: 300px;
        background-color: #f00;
    }
    .son{
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        color:blue;
    }
</style>
<div class="parent">
    <div class="son">姘村钩鍨傜洿灞呬腑</div>
</div>