让DIV盒子居中的几种方法：
1. flex -----------------------------------------（dispaly : flex，存在兼容性问题）2. transform-----------------------------------（需使用 position: absolute）
3. margin 负间距 ----------------------------------------（需使用 position: absolute, 该方法类似于上一种方法，但需知道具体宽高）
4. margin: auto ------------------------------------------（需使用 position: absolute, 绝对定位下top left right bottom 都设置0，不设置无法实现，该方法兼容ie8以上浏览器）
5. 通过table-cell来实现---------------------------------（缺点在于，大盒子如果转成table-cell，那么这个盒子便设置不了margin了）
6. 通过行内块和vertical-align实现-------------------（这种方式必须要添加一个空标签）
前四种比较好用，可优先选择使用
1.通过flex来实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
border: 3px solid #000;
background-color: green;
display: flex; ---------------------------实际上是内部子元素相对于自身进行居中对齐
justify-content: center;
align-items: center;
}
.box2{
background-color: blue;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
</div>
</div>
</body>
</html>
效果如下：
2.通过定位transform来实现
使用top:50%; left:50%;时，是以盒子的左上角为原点定位，是左上角的原点居中，但是元素本身并不居中。
transform：translate(-50%，-50%):分别向左向上移动自身长宽的50%，使其位于中心。
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>my-test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.content {
padding: 20px;
background: orange;
color: #fff;
position: absolute;-----（相对定位的元素并没有脱离标准文档流，而绝对定位的元素则脱离了文档流。如果一个盒子设置了绝对定位，那么该元素不占据空间。并且绝对定位元素相对于最近的非static祖先元素定位。当不存在时，则相对于根元素页面的左上角进行定位。）
top: 50%;
left: 50%;
border-radius: 5px;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="content">
我不知道我的高度和宽度是多少。
</div>
</body>
</html>
效果如下：（居中于整个页面）
3. margin 负间距
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>my-test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.content {
position: absolute;
width: 200px;
height: 200px;
border: 2px solid red;
background-color: yellow;
left:50%;
top:50%;
margin-left:-102px;
margin-top:-102px;
}
</style>
</head>
<body>
<div class="content">
我有固定的宽度和高度。
</div>
</body>
</html>
注意：
该方法高度类似于第二种方法，但是需要知道盒子大小，才能进行最后两步的相对移位，第二种方法因为使用的是自身百分比，故不须知道具体宽高
4. margin: auto
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>my-test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.father {
/* position: relative; */
background-color: gray;
width: 400px;
height: 400px;
}
.content {
position: absolute; -------------相对于整个页面居中，如果父级有relative,则相对于父级上下左右居中
width: 200px;
height: 200px;
border: 6px solid red;
background-color: yellow;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="father">
<div class="content">
我有固定的宽度和高度。
</div>
</div>
</body>
</html>
效果如下：（此时是位于窗口正中央，截屏太大，仅一部分，如果父级有relative,则相对于父级灰色盒子上下左右居中）
5. 通过table-cell来实现
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>my-test</title>
<style>
/*这样写的缺点在于，大盒子如果转成table-cell，那么这个盒子便设置不了margin了。*/
.box{
width: 300px;
height: 200px;
border: 1px solid #000;
text-align: center;
vertical-align: middle;
display: table-cell;
}
/*这里的 inline-block 可以不用写，不会有任何问题*/
/* .box1{
display: inline-block;
vertical-align: middle;
} */
</style>
</head>
<body>
<div class="box">
<div class="box1">
你喜欢的是细水长流煮红豆</br>
我想要的是声色犬马走天涯</br>
</br>
</br>
你喜欢的是细水长流煮红豆</br>
我想要的是声色犬马走天涯</br>
</div>
</div>
</body>
</html>
效果如下：
6. 通过行内块和vertical-align实现
<!DOCTYPE html>
<html>
<head>
<title>my-test</title>
<style>
.box{
width: 300px;
height: 200px;
border: 1px solid #000;
text-align: center;
margin: 0 auto;
}
.box1{
vertical-align: middle;
display: inline-block;
}
.tips{
width: 1px;
height: 100%;
/*background-color: red;*/
vertical-align: middle;
display: inline-block;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
入则恳恳以尽忠，出则谦谦以自悔。</br>
<br>
<br>
入则恳恳以尽忠，出则谦谦以自悔。</br>
</div>
<span class="tips"></span>
</div>
</body>
</html>
效果如下：
