如果一個元素具有固定或相對大小，要使其不管如何調整窗口大小或滾動頁面，始終位於瀏覽器窗口中間，可使用如下方法：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <style> .window-center { /* 將position設置為fixed，使元素相對於瀏覽器窗口定位 */ position: fixed; /* 將margin設置為auto，使瀏覽器自動推算元素外邊距 */ margin: auto; /* 將上下左右邊距（相對於瀏覽器窗口邊緣）全設為0，使瀏覽器推算出的外邊距上下、左右對應相等 可以設置任何其他相等的值，但如果窗口小到不能容下任意一個方向的兩側邊距，元素也將不居中，所以推薦設為0 */ left: 0; right: 0; top: 0; bottom: 0; } div { /* 使用這種方法的元素必須有絕對或相對大小，否則瀏覽器推算出的margin將為0，元素將被拉伸，以適應窗口大小和四個邊距值 */ width: 30%; height: 100px; background-color: antiquewhite; } </style> </head> <body> <div class="window-center"></div> </body> </html>
效果如圖：
那如何讓一個元素相對於其父元素水平垂直居中呢？首先，要把元素的position屬性值改為absolute，使其有可能相對於父元素定位，而不是相對於瀏覽器窗口定位。absolute指定元素相對於position值不為static的第一個祖先元素定位（如果找不到這樣的祖先元素，就相對於body），而static是元素position屬性的默認值，所以我們還要在父元素上做手腳。除了默認值static，position屬性主要的值還有absolute、fixed和relative。由於大多數時候，我們不想為了子元素的居中而改變父元素的位置或定位方式，所以排除absolute和fixed（當然這兩個值並不影響子元素的居中）。只剩下relative了，它指定元素相對於static定位方式確定的位置定位（使用left、right、top和bottom屬性）。如果將父元素的position屬性設為relative，但不改變定位屬性（left、top等），那么就達到了既讓子元素相對於其定位，又不改變其默認布局方式的效果。舉例如下：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <style> .parent-center { /* 將position設置為absolute，使元素有可能相對於瀏覽器窗口定位 */ position: absolute; /* 將margin設置為auto，使瀏覽器自動推算元素外邊距 */ margin: auto; /* 將上下左右邊距（相對於父元素邊緣）全設為0，使瀏覽器推算出的外邊距上下、左右對應相等 可以設置任何其他相等的值，但如果父元素小到不能容下任意一個方向的兩側邊距，元素也將不居中，所以推薦設為0 */ left: 0; right: 0; top: 0; bottom: 0; } div.parent { position: relative; /* 父元素可以有絕對或相對大小，也可以僅由其內容決定其大小 */ width: 50%; height: 200px; background-color: aquamarine; } div.child { /* 使用這種方法的元素必須有絕對或相對大小，否則瀏覽器推算出的margin將為0，元素將被拉伸，以適應父元素大小和四個邊距值 */ width: 30%; height: 100px; background-color: antiquewhite; } /* 這是一個用於演示父元素的默認定位未被影響，並且子元素確實是相對於父元素居中的干擾元素 */ #commonDiv { width: 100px; height: 100px; background-color: cadetblue; } </style> </head> <body> <div id="commonDiv"></div> <div class="parent"> <div class="parent-center child"></div> </div> </body> </html>
效果如圖：
此外，還可以通過為父元素啟用彈性盒布局解決子元素水平垂直居中的問題：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <style> div.parent { /* 啟用彈性盒布局 */ display: flex; /* 使子元素水平居中 */ justify-content: center; /* 使子元素垂直居中 */ align-items: center; width: 50%; height: 200px; background-color: aquamarine; } div.child { width: 30%; height: 100px; background-color: antiquewhite; } </style> </head> <body> <div class="parent"> <div class="child"></div> </div> </body> </html>
效果如圖：
