1.水平居中的 margin：0 auto;
關於這個，大家也不陌生做網頁讓其居中用的比較多, 這個是用於子元素上的，前提是不受float影響
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 300px;
height: 300px;
border: 3px solid red;
/*text-align: center;*/
}
img{
display: block;
width: 100px;
height: 100px;
margin: 0 auto;
}
</style>
<!--html-->
<body>
<div class="box">
</div>
</body>
我自己是一名從事了多年開發的web前端老程式設計師，目前辭職在做自己的web前端私人定製課程，去年我花了一個月整理了一份最適合2019年學習的web前端學習乾貨，各種框架都有整理，送給每一位前端小夥伴，想要獲取的可以關注我的頭條號並在後台私信我：前端，即可免費獲取。
2.水平居中 text-align：center；
img的display：inline-block；類似一樣在不受float影響下進行 實在父元素上添加效果讓它進行水平居中
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 300px;
height: 300px;
border: 3px solid red;
text-align: center;
}
img{
display: inline-block;
width: 100px;
height: 100px;
/*margin: 0 auto;*/
}
</style>
<!--html-->
<body>
<div class="box">
</div>
</body>
3.水平垂直居中（一）定位和需要定位的元素的margin減去寬高的一半
這種方法的局限性在於需要知道需要垂直居中的寬高才能實現，經常使用這種方法
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 300px;
height: 300px;
background:#e9dfc7;
border:1px solid red;
position: relative;
}
img{
width: 100px;
height: 150px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -50px;
}
</style>
<!--html -->
<body>
<div class="box" >
</div>
</body>
4.水平垂直居中（二）定位和margin:auto;
這個方法也很實用，不用受到寬高的限制,也很好用
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 300px;
height: 300px;
background:#e9dfc7;
border:1px solid red;
position: relative;
}
img{
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
<!--html -->
<body>
<div class="box" >
</div>
</body>
5.水平垂直居中（三）絕對定位和transfrom
這個方法比較高級了，用到了形變，據我所知很多大神喜歡使用這個方法進行定位，逼格很高的，學會後面試一定要用！這個是不需要知道居中元素的寬高就可以使用的，代碼里的圖片稍微有點大，改改寬高，僅此而已，在面試中大部分人會問如果不知道寬高該如何居中，答這個，加分！對transform不了解的同學可以查閱一下資料了解一下！
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 300px;
height: 300px;
background:#e9dfc7;
border:1px solid red;
position: relative;
}
img{
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
<!--html -->
<body>
<div class="box" >
</div>
</body>
6.水平垂直居中（四）diplay：table-cell
其實這個就是把其變成表格樣式，再利用表格的樣式來進行居中，很方便
<style>
.box{
width: 300px;
height: 300px;
background:#e9dfc7;
border:1px solid red;
display: table-cell;
vertical-align: middle;
text-align: center;
}
img{
width: 100px;
height: 150px;
/*margin: 0 auto;*/ 這個也行
}
</style>
<!--html -->
<body>
<div class="box" >
</div>
</body>
7.水平垂直居中（五）flexBox居中
這個用了C3新特性flex,非常方便快捷，在移動端使用完美，pc端有兼容性問題，以後會成為主流的
<style>
.box{
width: 300px;
height: 300px;
background:#e9dfc7;
border:1px solid red;
display: flex;
justify-content: center;
align-items:center;
}
img{
width: 150px;
height: 100px;
}
</style>
<!--html -->
<body>
<div class="box" >
</div>
</body>
8.水平垂直居中（六）利用vertical-align:middle;
這方法不常見，但是一位朋友補充後我覺得也不失為一種好方法可以讓別人刮目相看，這個方法關鍵要有一個和容器一樣高的元素作為居中的一個參照就像b元素一樣
<style>
.wrap{
width:300px;
height:300px;
background:rgba(0,0,0,0.5);
text-align:center;
font-size:0;
}
.vamb{
display:inline-block;
width:0px;
height:100%;
vertical-align:middle;
}
.test{
display:inline-block;
vertical-align:middle;
font-size:16px;
text-align:left;
background:red;
}
</style>
<body>
<div class="wrap">
<b class="vamb"></b>
<div class="test">
寬高不定<br>
垂直水平居中
</div>
</div>
</body>
常見又實用的例子就先寫到這，歡迎提意見，謝謝大家！喜歡請關注點個讚，也是對我的支持和鼓勵！
作者：coderLfy連結：https://www.jianshu.com/p/a7552ce07c88