CSS解决盒模型居中的问题

最新推荐文章于 2025-02-15 14:34:53 发布

原创最新推荐文章于 2025-02-15 14:34:53 发布 · 491 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #前端 #大前端 #css3

本文详细介绍六种CSS技巧，包括margin+width、text-align+inline-block、float+position、flex布局、fit-content以及定位方法，帮助你轻松掌握盒子模型中元素的水平垂直居中技巧。

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 的一半 */ 
}