元素在浏览器窗口居中的方法
这里先给出代码块，如果有同学已经看出来点眉目可以先自己尝试一下。
position:fixed;
left:50%;
top:50%;
margin-left:-元素宽度的一半;
margin-top:-元素高度的额一半;
好，那接下来咱们就试一试吧！
<head>
<meta charset="UTF-8">
<style>
.box_compare {
width: 100%;
height: 1000px;
background: skyblue;
}
.box {
width: 500px;
height: 300px;
background: blue;
position: fixed;
left: 50%;
top: 50%;
margin-top: -150px;
margin-left: -250px;
}
</style>
</head>
<body>
<div class="box_compare"></div>
<div class="box"></div>
</body>
上面的方法其实有一个弊端，即，当元素未设置宽时是不能使用的，添加了定位后的元素未设置宽度的元素宽度由内容撑开的，因此不能使用这个方法，下面给大家提供一个更简捷的方法。
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
这个方法可能会有同学不理解，为什么又是left: 0;right: 0;又是top: 0;bottom: 0;，这个目的是为了将它变成一个自由的元素，这时元素的宽高在未设置时默认是父元素的宽高，再使用margin: auto;就能使它在浏览器窗口居中了，否则，添加了fixed的元素使用margin: auto;是无效的。
好，接下来我们再次尝试一下。
<head>
<meta charset="UTF-8">
<style>
.box_compare {
width: 100%;
height: 1000px;
background: skyblue;
}
.box {
width: 60%;
height: 300px;
background: blue;
position: fixed;
left: 0;right: 0;
top: 0;bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="box_compare"></div>
<div class="box"></div>
</body>
上面这个方法在写web端页面时应用很广，同学们要多多练习哈！学会了使元素在浏览器窗口居中的方法后，那么如何使元素在父元素内居中呢？同学们可以自己思考一下，下期我再给大家介绍！
