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

1、margin+width

适用于盒子的宽度是已知的

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

.child {width: 50px;margin: 0 auto;}

2、text-align+inline-block

适用于盒子的宽度是未知的

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

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

3、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%;}

4、position

适用于盒子的宽度是未知的

<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%;}

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

1、position+transform

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

.parent {position: relative;width: 200px;height: 200px;}.child {position: absolute;top: 50%;transform: translate(0%, -50%);}

2、flex布局

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

.parent {display: flex;align-items: center;}

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

1、position+tranform

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

.parent {position: relative;}.child {position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}

2、position

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

.parent {position: relative;}.child {position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}

3、flex

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

.parent {width: 500px;height: 500px;background-color: yellow;display: flex;/*子元素都会变成行内块级元素*/justify-content: center;align-items: center;/*单行垂直居中*//*align-content: center; 多行垂直居中*/}.child {width: 100px;height: 100px;background-color: saddlebrown;margin-left: 10px;}