如何在 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=)