垂直居中的純css方法

一、基于position：absolute，（但是絕對(duì)定位，會(huì)脫離文檔流，對(duì)兄弟元素不友好）

1、position: absolute;top: 50%;left: 50%;margin-top: -50px;margin-left: -50px;

2、margin: auto;position: absolute;top: 0;right:0;bottom: 0;left: 0;

以上兩種div大小明確

3、transform:translate（-100px,-100px）；position: absolute;top: 50%;left: 50%;

二、大小不明確

4、display:flex;justify-content:center;align-items:center;

5、display：table,（會(huì)破壞頁(yè)面整體布局）

.wrapper {
                height: 400px;
                width:600px;
                border: 2px solid pink;
                border-radius:10px;
                display:table;
            }
            .box {
                text-align:center;
                position:relative;
                display:table-cell;
                vertical-align:middle;
                background:#abcdef;
            }

       <div class="wrapper">
        
    <div class="box">adfagagafajkfhla</div>
   
     </div>

以上就是對(duì)css水平垂直居中方式有哪些？（代碼實(shí)例）的全部介紹，如果您想了解更多有關(guān)CSS視頻教程，請(qǐng)關(guān)注PHP中文網(wǎng)。

以上就是css水平垂直居中方式有哪些？（代碼實(shí)例）的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！