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

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

• « 上一篇：[框架]高并发中的惊群效应
• » 下一篇：Python3——多线程之threading模块