前言
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
一、absolute 绝对定位
absolute 绝对定位 这是我们最常用的一种居中定位写法 要求必须确定div的宽高度 目前市面上的浏览器基本上都支持这种写法：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>absolute居中定位</title>
<style>
*{
margin:0;
padding:0
}
.absoluteCenter{
width:600px;
height:400px;
position:absolute;
background: rgb(50,183,97);
left:50%; top:50%;
margin-left: -300px;
margin-top: -200px;
}
</style>
</head>
<body>
<div class="absoluteCenter">我是absolute居中定位</div>
</body>
</html>
二、translate定位
translate定位 这是css3 transform的属性 通过自身的偏移来定位 而且他有个极大的好处 不需要知道div的宽高度 就像js里的this self一样 可以将宽高度设为百分比 IE browser<IE9不支持 在移动端使用较好：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>translate居中定位</title>
<style>
*{
margin:0;
padding:0
}
.translateCenter{
width: 40%;
height: 20%;
position: absolute;
left:50%; top:50%;
transform:translate(-50%,-50%);
background: #2d2d2d;
}
</style>
</head>
<body>
<div class="translateCenter">我是translate居中定位</div>
</body>
</html>
三、margin居中定位
margin居中定位 不需要确定div的宽高度 让top,bottom,left,right都为0 再加个margin:auto 。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin居中定位</title>
<style>
*{
margin:0;
padding:0
}
.marginCenter{
width:200px;
height: 200px;
position: absolute;left:0;
top:0; right:0; bottom: 0;
margin: auto;
background: #f2056e;
}
</style>
</head>
<body>
<div class="marginCenter">我是margin居中定位</div>
</body>
</html>
四、fixed的居中定位
fixed的居中定位 这个用的最多的可能就是导航条这块儿 让导航条居中显示不随页面滚动
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fixed居中定位</title>
<style>
*{
margin:0;
padding:0
}
.fixedCenter{
max-width:980px;
height:70px; position:fixed;
margin:0 auto;
left:0;
right:0;
background:rgb(67,163,244);
}
</style>
</head>
<body>
<div class="fixedCenter">我是fixed居中定位</div>
</body>
</html>