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

<div class="parent">    <div class="child"></div> </div>.parent { text-align: center; } .child {display: inline-block; } 

方法三：float+position

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

方法四：

<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

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

方法六：fit-content

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

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

方法一：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布局

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

方法四：table-cell布局

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

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

方法一：

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