讓div在父元素中垂直居中
1.利用定位和margin：auto讓子元素在父元素中水平垂直居中
<style>
.box {
width: 500px;
height: 500px;
margin: 100px auto;
border: 1px solid #f00;
position: relative;
}
.box1 {
width: 100px;
height: 100px;
background-color: #0f0;
position: absolute;
left: 0;
bottom: 0;
top: 0;
right: 0;
margin: auto;
}
</style>
<div class="box">
<div class="box1"></div>
</div>
實現(xiàn)效果：
2.利用定位以及transform和margin取值屬性讓其居中
利用定位margin取值讓子元素居中:
<style>
.box {
width: 500px;
height: 500px;
margin: 100px auto;
border: 1px solid #f00;
position: relative;
}
.box1 {
width: 100px;
height: 100px;
background-color: #ff0;
position: absolute;
left:50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
</style>
<div class="box">
<div class="box1"></div>
</div>
margin取值應(yīng)為子元素寬高的一半（margin的取值可以為負(fù)值迄委，但padding顯然不行）并徘，缺點是必須知道子元素的寬高具體大小且需要計算，當(dāng)子元素的大小被修改后對應(yīng)的margin值也需要修改否則達(dá)不到劇中的效果踢京，從而引導(dǎo)我們使用更方便快捷的方法。
利用定位與transform實現(xiàn)垂直水平居中：
<style>
.box {
width: 500px;
height: 500px;
margin: 100px auto;
border: 1px solid #f00;
position: relative;
}
.box1 {
width: 100px;
height: 100px;
background-color: #ff0;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
<div class="box">
<div class="box1"></div>
</div>
transform：translate（-50%离咐，-50%）第一個-50%是指x軸方向向左位移子元素本身寬的百分之50夷磕，而第二個-50%是指元素在y軸方向向上平移子元素本身高的百分之50。
二者的原理是相同的都是在加了left：50%與top：50%后再減去盒子寬高的一半來實現(xiàn)水平垂直居中偏灿。
3.彈性盒display：flex；
<style>
.box {
width: 500px;
height: 500px;
margin: 100px auto;
border: 1px solid #f00;
display: flex;
justify-content: center;
align-items: center;
}
.box1 {
width: 100px;
height: 100px;
background-color: #ff0;
}
</style>
<div class="box">
<div class="box1"></div>
</div>
給父元素添加display：flex钝的；讓它變成彈性盒翁垂，在利用justify-content: center;與 align-items: center;，讓子元素在主軸與交叉軸（縱軸）方向居中扁藕。缺點是在網(wǎng)頁端彈性盒因為兼容問題一般不被經(jīng)常使用沮峡。
4.子元素轉(zhuǎn)為行內(nèi)塊元素
<style>
.box {
width: 500px;
height: 500px;
margin: 100px auto;
border: 1px solid #f00;
text-align: center;
}
.box1 {
width: 100px;
height: 100px;
background-color: #ff0;
display: inline-block;
vertical-align: middle;
}
span {
height: 100%;
width: 0;
vertical-align: middle;
display: inline-block;
}
</style>
<div class="box">
<div class="box1"></div><span></span>
</div>
設(shè)置一個元素在一個容器中垂直居中，必須更改默認(rèn)的display屬性值為inline-block;并加上同級元素（標(biāo)尺）（同級元素[標(biāo)尺]樣式設(shè)置為vertical-align:middle;width:0;height:100%;display:inline-block;）
三個條件：
1：必須給容器（父元素）加上text-align:center;
2:必須給當(dāng)前元素轉(zhuǎn)成行內(nèi)塊元素（display:inline-block;）再給當(dāng)前元素加上vertical-align:middle;
3：在當(dāng)前元素的后面（沒有回車）加上同級元素span;并對span進(jìn)行
vertical-align:middle;
width:0;
height:100%;
display:inline-block
5.父元素轉(zhuǎn)為gird利用網(wǎng)格布局
<style>
.box {
width: 400px;
height: 400px;
border: 1px solid red;
margin: 100px auto;
display: grid;
/* 第一個數(shù)值為垂直方向?qū)R方式 第二數(shù)值為水平方向?qū)R方式 */
place-items: center center;
}
.box1 {
width: 100px;
height: 100px;
background-color: #00f;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
原理類似于利用彈性布局亿柑，將父元素轉(zhuǎn)換為網(wǎng)格元素再利用ustify-items：center（內(nèi)容在單元格內(nèi)的水平對齊方式）邢疙，和align-items：center；（內(nèi)容在單元格內(nèi)垂直對齊方式）place-items為復(fù)合寫法望薄，相當(dāng)于父元素為一個一行一列的單元格而box1為它單元格中的元素疟游。（其實很利用place-content也能做到原理還沒搞懂...）
