- 利用絕對定位（absolute）和外邊距（margin）
說明：這種方式適用子級的寬(width)高(height)固定，將父級(box)設(shè)置成相對定位(position: relative)，將子級(content)設(shè)置成絕對定位（相當于其父級），top、left給50%，再用margin-top=-(子級高度的一半)，margin-left=-(子級寬度的一半)。
代碼：
/* 這里是css樣式的內(nèi)容 */
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
height: 300px;
border: 1px solid #000;
background-color: lawngreen;
position: relative;
}
.content{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -50px;
}
</style>
<!-- 這是是html的內(nèi)容 -->
<div class="box">
<div class="content"></div>
</div>
顯示效果如下：
3868852-054510e13491eec4.png
- 利用絕對定位（absolute）和外邊距（margin:auto）
說明：這種方式可適用子級的寬(width)高(height)不固定，將父級(box)設(shè)置成相對定位(position: relative)，將子級(content)設(shè)置成絕對定位（相當于其父級），top、left、right、bottom給0，再用margint=auto。
代碼：
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
height: 300px;
border: 1px solid #000;
background-color: lawngreen;
position: relative;
}
.content{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
<div class="box">
<div class="content"></div>
</div>
顯示效果如下：
3868852-054510e13491eec4.png
- 利用絕對定位（absolute）和transfrom
說明：此方法利用了定位和CSS3的形變，另外不需要知道居中元素的寬高就可以使用。
代碼：
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
height: 300px;
border: 1px solid #000;
background-color: lawngreen;
position: relative;
}
.content{
padding: 50px; /* 此處的padding只是為展示子級寬高不定，由內(nèi)容撐開 */
background-color: blue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
<div class="box">
<div class="content"></div>
</div>
顯示效果如下：
3868852-054510e13491eec4.png
- 利用表格（diplay：table-cell）
說明：此方法把其父級變成表格樣式，再利用表格的樣式來進行居中。
注意：子級如果為塊元素就得加margin:0 auto;也可子級設(shè)為行內(nèi)元素(display:inline-block)。兩種方式。
代碼：
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
height: 300px;
border: 1px solid #000;
background-color: lawngreen;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.content{
width: 100px;
height: 100px;
background-color: blue;
/* margin: 0 auto;*/ /* 方式一 */
display: inline-block; /* 方式二 */
}
</style>
<div class="box">
<div class="content"></div>
</div>
顯示效果如下：
3868852-054510e13491eec4.png
- 利用彈性盒模型（flexBox）
說明：此方法，利用了CSS3的新特性flex。不需要知道居中元素的寬高就可以使用。但需要注意的是：在移動端使用完美，但pc端有兼容性問題。
代碼：
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
height: 300px;
border: 1px solid #000;
background-color: lawngreen;
display: flex;
justify-content: center;
align-items:center;
}
.content{
padding: 50px; /* 此處的padding只是為展示子級寬高不定，由內(nèi)容撐開 */
background-color: blue;
}
</style>
<div class="box">
<div class="content"></div>
</div>
顯示效果如下：
3868852-054510e13491eec4.png
- 基線對齊方式（vertical-align:middle）
說明：此方法，設(shè)置了一個“參照物(reference)”和容器一樣高一樣，然后在父級設(shè)置水平對齊方式( text-align:center)，并在參照物和子級設(shè)置基線對齊方式(vertical-align:middle)。不需要知道居中元素的寬高就可以使用注意：需要將參照物和子級都設(shè)成行內(nèi)塊元素( display:inline-block)
代碼：
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
height: 300px;
border: 1px solid #000;
background-color: lawngreen;
text-align:center;
}
.content{
padding: 50px; /* 此處的padding只是為展示子級寬高不定，由內(nèi)容撐開 */
background-color: blue;
display:inline-block;
vertical-align:middle;
}
.reference{
width:0px;
height:100%;
display: inline-block;
vertical-align:middle;
}
</style>
<div class="box">
<div class="content"></div>
<span class="reference"></span>
</div>
顯示效果如下：
3868852-054510e13491eec4.png
本人遇到的或者工作過中使用的先總結(jié)到這里，以后有新方式還有補充ing....
