<!-- position 居中问题详解
Type:笔记
Date: 2015/12/23
前几天看过这个问题， 昨天在写完一个留言添加居中后， 就把怎么计算的给忘了， 今天经过师傅级指点，又会了， 于是就有了本篇笔记。
--><span id="more-151"></span>
<html>
<head>
<title>position居中问题</title>
<meta charset="UTF-8">
<style type="text/css">
body
{
background:blue;
}
#main
{
width:200px;
height:200px;
background:red;
}
</style>
</head>
<body>
<div id="main">
</div>
</body>
</html>
<!-- part1 在body体里新建了一个div,给div的宽和高各200像素 -->
Type:笔记
Date: 2015/12/23
前几天看过这个问题， 昨天在写完一个留言添加居中后， 就把怎么计算的给忘了， 今天经过师傅级指点，又会了， 于是就有了本篇笔记。
--><span id="more-151"></span>
<html>
<head>
<title>position居中问题</title>
<meta charset="UTF-8">
<style type="text/css">
body
{
background:blue;
}
#main
{
width:200px;
height:200px;
background:red;
}
</style>
</head>
<body>
<div id="main">
</div>
</body>
</html>
<!-- part1 在body体里新建了一个div,给div的宽和高各200像素 -->
<html>
<head>
<title>position居中问题</title>
<meta charset="UTF-8">
<style type="text/css">
body
{
background:blue;
margin:0px;padding:0px;
}
#main
{
width:200px;
height:200px;
background:red;
}
</style>
</head>
<body>
<div id="main">
</div>
</body>
</html>
<!-- part2 把外边距到div外边框和内容到div内边框的距离全部清空，清空后，内容全部在左上角的位置，因为是左上角，所以夹角就是上和左 -->
<head>
<title>position居中问题</title>
<meta charset="UTF-8">
<style type="text/css">
body
{
background:blue;
margin:0px;padding:0px;
}
#main
{
width:200px;
height:200px;
background:red;
}
</style>
</head>
<body>
<div id="main">
</div>
</body>
</html>
<!-- part2 把外边距到div外边框和内容到div内边框的距离全部清空，清空后，内容全部在左上角的位置，因为是左上角，所以夹角就是上和左 -->
<html>
<head>
<title>position居中问题</title>
<meta charset="UTF-8">
<style type="text/css">
body
{
background:blue;
margin:0px;padding:0px;
}
#main
{
width:200px;
height:200px;
background:red;
position:absolute;
top:50%;
left:50%;
}
</style>
</head>
<body>
<div id="main">
</div>
</body>
</html>
<!-- part3 因为main的父级没有设置position，所以top left是绝对于浏览器，从左上角开始，上和左各占50%,这个时候，div的左上顶点就在body的中心位置 -->
<head>
<title>position居中问题</title>
<meta charset="UTF-8">
<style type="text/css">
body
{
background:blue;
margin:0px;padding:0px;
}
#main
{
width:200px;
height:200px;
background:red;
position:absolute;
top:50%;
left:50%;
}
</style>
</head>
<body>
<div id="main">
</div>
</body>
</html>
<!-- part3 因为main的父级没有设置position，所以top left是绝对于浏览器，从左上角开始，上和左各占50%,这个时候，div的左上顶点就在body的中心位置 -->
<html>
<head>
<title>position居中问题</title>
<meta charset="UTF-8">
<style type="text/css">
body
{
background:blue;
margin:0px;padding:0px;
}
#main
{
width:200px;
height:200px;
background:red;
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
}
</style>
</head>
<body>
<div id="main">
</div>
</body>
</html>
<!-- part4 我们前面知道了， 中心点在div的左上角， 又知道了， div的长和高各占200像素， 于是这个时候，div上移100像素中心点就到了height 100像素的位置， 再左移100像素，中心点就变成了width 100像素的位置， 到此， position居中完毕。 -->
<head>
<title>position居中问题</title>
<meta charset="UTF-8">
<style type="text/css">
body
{
background:blue;
margin:0px;padding:0px;
}
#main
{
width:200px;
height:200px;
background:red;
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
}
</style>
</head>
<body>
<div id="main">
</div>
</body>
</html>
<!-- part4 我们前面知道了， 中心点在div的左上角， 又知道了， div的长和高各占200像素， 于是这个时候，div上移100像素中心点就到了height 100像素的位置， 再左移100像素，中心点就变成了width 100像素的位置， 到此， position居中完毕。 -->