讓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>
效果如下：
