css如何實現(xiàn)水平垂直居中

這篇文章給大家分享的是有關(guān)css如何實現(xiàn)水平垂直居中的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

垂直居中的純css方法

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

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,（會破壞頁面整體布局）

.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>

感謝各位的閱讀！關(guān)于css如何實現(xiàn)水平垂直居中就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！