常用的几种水平垂直居中方式(按受用几率来写)
第一种方法:flex布局
主要代码:flex;align-items: center;justify-content: center
第二种方式:flex定位
主要代码:display:flex;margin:auto
第三种方式:position+margin
主要代码:position定位 margin移位
第四种方式:diaplay:table-cell定位
主要代码:diaplay:table-cell
第五种方式:position+transform
主要代码:position+transform
第六种方式:position
主要代码:position定位
第一种方法:flex布局(表示这种方式布局是最流行的)
<div class="wrap">
<div class="center"></div>
</div>
.wrap {
background: yellow;
width: 200px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
.center {
background: green;
width: 100px;
height: 100px;
}
第二种方式:flex定位(最简洁的方式)
<div class="wrap">
<div class="center"></div>
</div>
.wrap {
background: yellow;
width: 200px;
height: 200px;
display: flex;
}
.center {
background: green;
width: 100px;
height: 100px;
margin: auto;
}
第三种方式:position+margin(常用方式,兼容性强)
<div class="wrap">
<div class="center"></div>
</div>
.wrap {
width: 200px;
height: 200px;
background: yellow;
position: relative;
}
.wrap .center {
width: 100px;
height: 100px;
background: green;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
第四种方式:diaplay:table-cell定位(不怎么常用,表示比较难用)
<div class="wrap">
<div class="center"></div>
</div>
.wrap{
width: 200px;
height: 200px;
background: yellow;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.center{
display: inline-block;
vertical-align: middle;
width: 100px;
height: 100px;
background: green;
}
第五种方式:position+transform
<div class="wrap">
<div class="center"></div>
</div>
.wrap {
position: relative;
background: yellow;
width: 200px;
height: 200px;}
.center {
position: absolute;
background: green;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
width: 100px;
height: 100px;
}
第六种方式:position
<div class="wrap">
<div class="center"></div>
</div>
.wrap {
background: yellow;
width: 200px;
height: 200px;
position: relative;
}
/**方法一**/
.center {
background: green;
position: absolute;
width: 100px;
height: 100px;
left: 50px;
top: 50px;
}
/**方法二**/
.center {
background: green;
position: absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin-left:-50px;
margin-top:-50px;
}