?

技巧一（推薦指數★★★★★）?采用top、right、bottom、left，可以不在乎父元素的寬度和高度，對GPU損耗低于技巧三，但是對瀏覽器內存的消耗高于技巧三

    .子元素 {/*父元素需要position: relative|absolute;*/position: absolute;margin: auto;top: 0;left: 0;right: 0;bottom: 0;width: 100px;height: 100px;}

技巧二（推薦指數★★★☆☆）要計算寬度、高度，僅適用于定寬定高的子元素，具有一定局限性

    .子元素 {position: absolute;width: 寬度px;height: 高度px;margin-left: calc(-寬度 / 2);margin-top: calc(-高度 / 2);left: 50%;top: 50%;        }

技巧三（推薦指數★★★★☆）渲染快，可以不在乎父元素和子元素的寬度和高度，特別適用于當某段動態文本（子元素）在div（父元素）內需要水平垂直居中的情況，不過需要改變子元素的position屬性，如果position不能修改的情況建議使用技巧五，同時需要注意，如果該子元素還有其他兄弟元素，可能會對排版間距造成一些影響，因為這里用了translate屬性

    .子元素 {/*父元素需要position: relative|absolute;*/position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}

技巧四（推薦指數★★★☆☆）只對全局居中有效，如果在某個div內部還需要計算父級div寬度高度，100vh和100vw就需要換成父元素的高寬

    .子元素 {margin-top: calc(100vh / 2);margin-left: calc(100vw / 2);transform: translate(-50%, -50%);}

技巧五（推薦指數★★★★☆）只需要對父元素進行設定，不需要管子元素死活，美中不足在實際使用過程我們往往只會關注子元素，如果修改父元素的這些屬性將會導致一系列的連鎖反應，因為父元素可能還包含了其他子元素，如果非得要使用該方法，建議父元素只有唯一子元素的時候使用吧！特別適用于div（父元素）內有動態文本（子元素）需要水平垂直居中的情況，不過這會修改父元素的display屬性，如果不允許修改display的情況下建議使用技巧三

    .父元素{display: flex;justify-content: center;align-items: center;}

總結

以上是生活随笔為你收集整理的几种经典的居中技巧（垂直和水平居中）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。