html盒⼦整体向下移动，盒⼦上下左右居中⽅法全（持续更新
中）
总是忘记这⼏个⽅法，今天来记录⼀下
⼀、已知⼤⼩盒⼦；左右居中
1、 使⽤定位，左右拉取⽅法：
html:
css:
.box{width: 300px;height: 300px;border: 1px solid orange;position: relative;}
.child{width: 100px;height: 100px;border: 1px solid blue;position:absolute;left: 50%;top: 50%;margin-left: -50px;margin-top: -50px;}
2、使⽤margin：auto，⽅法:
html:
css:
.box{width: 300px;height: 300px;border: 1px solid red;position: relative;}
.child{width: 100px;height: 100px;border: 1px solid green;position:absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;}
⼆、未知⼤⼩盒⼦左右居中，
1、使⽤位移⽅法，兼容性较低，移动端慎⽤
html：
我是⼦盒⼦
css：
.box{width: 300px;height: 300px;border: 1px solid red;position: relative;}
.child{width:auto;border: 1px solid green;position:absolute;left: 50%;top: 50%;transform:translate(-50%,-50%);-webkit-transform: translate(-50%, -50%);　-moz-transform: tra
nslate(-50%, -50%);　-ms-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);}
2、组合使⽤display:table-cell和vertical-align、text-align，使⽗元素内的所有⾏内元素⽔平垂直居中(内部div设置display:inline-block 即可)。
html：
我爱你
我爱你
亲爱的中国
我爱你
亲爱的中国
div(inline-
block)
css：
/*** table-cell middle center组合使⽤ ***/
.cell {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 240px;
height: 180px;
border:1px solid #666;
}
3、⽤弹性布局实现垂直左右居中
html：
css：
div中的div居中*{
margin: 0;
padding: 0;
}
.wrap{
width: 100px;
height: 100px;
border: 1px solid #000;
margin: 3.125em auto;
display: flex;
justify-content: center;
align-items: center;
}
.in{
width: 10px;
height: 10px;
background: #000;
border-radius: 50%;
}
display:flex; 设置.wrap为弹性布局
justify-content:center；定义项⽬在主轴(⽔平⽅向)上居中对齐align-items:center；定义项⽬在交叉轴(垂直⽅向)上居中对齐img元素再div中居中对齐：
第⼀种⽅法：
第⼀步：在img标签后⾯添加⼀个span元素
第⼆步：为这⼏个元素设置样式
1.把#div1元素设置text-align:center
2.把添加的元素span转化为⾏内块元素(display:inline-block)，并且设置vertical-align:middle
3.为img元素设置vertical-align:middle。
完成以上操作之后，这个Img元素在#div1中就是垂直居中的了，这种⽅法的兼容性等⽐较好，唯⼀的缺点可能就是要在元素后⾯添加⼀个元素
(注意：这个元素最好是span元素，如果是div元素的话，在低版本ie下有兼容问题)
第⼆种⽅法：
这种⽅法利⽤了css3的新特性
为#div1设置display:flex;vertical-align:middle;align-items:middle。
这种⽅法的缺点就是只要不⽀持css3的浏览器，那就不会起作⽤了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。