div居中方法（共8種）

2021-09-27 08:20:31 字數 973 閱讀 8087

行級元素


塊級元素
display:table;此元素會作為塊級**來顯示（類似 ），**前後帶有換行符.

display:table-cell;此元素會作為乙個**單元格顯示（類似 和 ）

塊級元素
利用flex布局使內部塊級元素水平，垂直居中（display:flex;justify-content: center; align-items:center;）

塊級元素
利用定位實現，父元素：position:relative; ，子元素：position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);

塊級元素
絕對定位， left：50%，top: 50% + margin-left:-(自身寬度的一半),margin-top:-(自身高度的一半)

缺點：要自己計算容器的寬高，萬一容器的寬高改變還要修改css樣式

塊級元素
絕對定位，left: 0，right: 0, top: 0, bottom: 0 + margin：auto

塊級元素
固定定位position:fixed;並設定乙個較大的z-index層疊屬性值。

塊級元素
要把元素相對於視口進行居中，那麼相當於父元素的高度就是視口的高度，視口的高度可以用vh來獲取：

塊級元素
flex加margin:auto

塊級元素

div居中方法

陳小鵬筆記 1 如果是知道具體寬度，使用margin left 600px或者padding left 600px這種方法可以用，但會隨著解析度大小或者是響應式螢幕裡會出現嚴重的問題，不適宜這樣寫。2 將div如同文字一樣顯示居中的方法 1 style 2 partent 5 center div ...

css td居中 div居中方法總結

行級元素 塊級元素 display table 此元素會作為塊級 來顯示 類似 前後帶有換行符.display table cell 此元素會作為乙個 單元格顯示 類似 和 塊級元素 利用flex布局使內部塊級元素水平，垂直居中 display flex justify content center...

div水平垂直居中方法總匯

方法一 絕對定位方法 不確定當前div的寬度和高度，採用transform translate 50 50 當前div的父級新增相對定位 position relative children方法二 絕對定位方法 確定當前div寬度和高度嗎，margin值為當前div寬度一半的負值。children方...