2019-07-29|2019-07-29 非浮动，浮动的盒子居中方法
非浮动盒子居中的方法：
方法一、
.box1 {
width: 400px;
height: 400px;
background: yellow;
display: flex;
justify-content: center;
align-items: center;
}
方法二、
.box1 {
width: 400px;
height: 400px;
background: yellow;
display: table-cell;
vertical-align:middle;
}
.box2 {
width: 200px;
height: 200px;
background: red;
margin: 0 auto
}
浮动盒子居中的方法： .box1 {
width: 400px;
height: 400px;
background: yellow;
float: left;
position: relative;
}
.box2 {
width: 200px;
height: 200px;
background: red;
float: left;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%)
}
小结： 不浮动盒子居中常用的两种方法： 方法一、父盒子：display：flex；justify-content：center；align-items:center。
方法二、父盒子：display：table-cell；vertical-align：middle；text-align：center。 子盒子：margin：0auto； 浮动的盒子居中的方法： 子绝父相父盒子：position：relative； 子盒子：position：absolute；top：50%；left：50%； transform：translate（-50%，-50%）
推荐阅读
- 对称加密和非对称加密的区别
- 病态与非病态的梦中人情结|病态与非病态的梦中人情结 - 草稿
- 「按键精灵安卓版」关于全分辨率脚本的一些理解（非游戏app）
- 勿说人是非
- 第十六天（请介绍一件让你非常自豪的事情，（不能是职业类的），什么原因感到自豪。）
- 一定要幸福
- 非暴力沟通|非暴力沟通 | 第九章《爱自己》
- 《非暴力沟通》07
- 校园非自愿来访者辅导问句学习
- 3.css浮动