CSS解决盒模型居中的问题

做~自己de王妃 提交于 2021-01-07 14:52:31

CSS实现盒子模型水平居中、垂直居中、水平垂直居中的多种方法

CSS实现盒子模型水平居中的方法

全局样式

.parent { 
color: #FFFFFF; 
height: 200px; 
width: 200px; 
margin: 0 auto;
background-color: #000000;
 } 
.child { 
width: 50px;
height: 50px;
background-color: #26f12d;
 }

第一种:margin+width

这种方法适用于已经知道width的盒子,实现起来比较简单

<div class="parent"> 
<div class="child"></div> </div> 
.child { 
width: 50px;
margin: 0 auto; 
}

第二种:text-align+inline-block

这种方法适用于多种场景(width不固定)

<div class="parent"> 
<div class="child"></div> </div> 

.parent { 
text-align:center; 
} 
.child { 
display: inline-block;
 }

第三种:float+position

这种方法适用于多种场景(width不固定)

<div class="parent"> 
<div class="between"> 
<div class="child"></div> </div>
</div> 
.between { 
position: relative; 
left: 50%; 
float: left; 
} 
.child {
position: relative; 
right: 50%; }

第四种:

这种方法适用于多种场景(width不固定)

<div class="parent"> 
<div class="between"> 
<div class="child"></div> </div>
</div>
 .parent {
 position: relative; 
} 
.between { 
position: absolute; 
left:50%;
 } 
.child { 
position: relative; 
right: 50%; 
}

第五种:flex

这种方法适用于多种场景(width不固定)

<div class="parent"> <div class="child"></div> </div> 
.parent { 
display:-webkit-box; 
-webkit-box-pack: center; 
-webkit-box-orient: horizontal; 
}

第六种:fit-content

这种方法适用于多种场景(width不固定)

<div class="parent"> 
<div class="between"> 
<div class="child"></div> </div>
</div> 
.between { 
width: -webkit-fit-content; 
margin: 0 auto; 
}

CSS实现盒子模型垂直居中的方法

第一种:position

这种方法适用于已经知道width的盒子

<div class="parent"> 
<div class="child"></div> </div> 
.parent { position:relative; 
width: 200px; 
height: 200px; 
} 
.child { 
position: absolute; 
margin:75px 0; 
}

第二种:position+transform

这种方法适用于已经知道width的盒子

<div class="parent"> 
<div class="child"></div> </div> 
.parent { position:relative; 
width: 200px; 
height: 200px; 
} 
.child { 
position: absolute; 
top: 50%;
transform: translate(0%, -50%); 
}

第三种:flex布局

这种方法适用于多种场景(width不固定)

<div class="parent"> 
<div class="child"></div> </div> 
.parent { 
display: flex;
align-items: center; 
}

第四种:table-cell布局

这种方法适用于多种场景(width不固定)

<div class="parent"> 
<div class="between"> 
<div class="child"></div> </div>
</div> 
.parent { 
display: table; 
} 
.between { 
display: table-cell;
vertical-align: middle; 
}

CSS实现盒子模型水平垂直居中方法

第一种:

<div class="parent"> 
<div class="child"></div> </div> 
.parent { 
position:relative; 
} 
.child { 
position: absolute; 
left: 50%; 
top: 50%; 
transform:translate(-50%,-50%); 
}

第二种:

<div class="parent"> 
<div class="child"></div> </div> 
.parent { position:relative; 
} 
.child { 
position: absolute; 
top: 0; 
bottom: 0; 
left: 0; 
right: 0;
margin: auto; 
}

第三种:

<div class="parent"> 
<div class="child"></div> </div> 
.parent { 
position:relative; 
} 
.child { 
position: absolute; 
top: 50%; 
left: 50%; 
margin-top:
-25px; /* 自身 height 的一半 */ margin-left: -25px; /* 自身 width 的一半 */ 
}
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!