如何在 CSS 中設定元件在浏覽器螢幕水準垂直居中
在 CSS 中設定元件在浏覽器螢幕水準垂直居中可分解為兩個問題，一是設定元件在其父元件的水準垂直居中，二是讓其父元件鋪滿整個螢幕。
對于讓最外層元件鋪滿整個螢幕，這需要将其寬高均設定為
100%
。不過這樣做了會導緻浏覽器出現水準和垂直的滑條。這是因為元素 body 會預設有一定的邊距 margin，一般為
8px
，是以同時還要将元素 body 的邊距 margin 設為 0。
對于讓元件在父元件中水準垂直居中，方法有很多，這裡選擇 flex 布局。直接在父元件中設定 flex 布局和水準垂直居中即可。（注意：使用 flex 布局這種方法是在父元件中進行設定。）
示例代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
/* 去掉邊距，這裡為了去除鋪滿螢幕後浏覽器橫豎兩邊的滑條 */
margin: 0;
}
#outermost {
/* 下面 3 行代碼設定塗滿整個螢幕 */
height: 100%;
width: 100%;
position: absolute;
/* 下面 3 行代碼設定子元素橫豎均居中 */
display: flex;
/*display: -webkit-flex;*/
/* 設定水準居中 */
justify-content: center;
/* 設定垂直居中 */
align-items: center;
background: #00ff0d;
}
.item {
width: 50px;
height: 40px;
border: 1px solid #00c1b1;
background: #ffffff;
}
</style>
</head>
<body>
<div id="outermost">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</html>
運作效果圖：
![DOM下元素 offset client scroll 相關屬性簡介[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)