css水平垂直居中方式有哪些？ （程式碼實例）

這篇文章帶給大家的內容是關於css水平垂直居中方式有哪些？ （程式碼實例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

垂直居中的純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;頂: 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>

以上就是對css水平垂直居中方式有哪些？ （程式碼實例）的全部介紹，如果您想了解更多有關CSS視訊教學，請關注PHP中文網。

以上是css水平垂直居中方式有哪些？ （程式碼實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！