酷知百科網

請輸入關鍵字詞

熱門搜尋排行

位置：首頁 > 遊戲數碼 > 互聯網

css設定水平垂直居中

互聯網7.46K

前端開發中常常需要對某個元素進行設定水平垂直居中，可以透過使用css3提供的transform的translate進行元素居中效果。
可以直接看最後一步，裏面包含了所有html代碼，可直接使用。

css設定水平垂直居中

操作方法

（01）新建一個html檔案，然後創建一個<div>標籤，然後給這個標籤設定一個class，案例中class爲test代碼：<div class="test">div元素水平垂直居中 </div>

css設定水平垂直居中 第2張

（02）使用transform與position設定給test類設定元素垂直水平居中

css設定水平垂直居中 第3張

（03）儲存html代碼檔案後使用瀏覽器開啟，即可在瀏覽器上看到div元素水平垂直居中

css設定水平垂直居中 第4張

（04）頁面所有代碼。可以直接複製所有代碼，粘貼到新建html檔案，儲存後開啟即可看到效果。所有代碼：<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>{width : 300px;height : 200px;background-color: #ddd;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}</style></head><body><div class="test">div元素水平垂直居中 </div></body></html>

標籤：CSS 居中 設定

相關文章