1.弹性盒子
给父元素设置
display:flex;
justify-content:center;
align-items:center;
.father {width: 200px;height: 200px;background-color: pink;display: flex;justify-content: center;align-items: center;}.son {width: 50px;height: 50px;background-color: yellow;}
2.line-height
只对文本有效果,对定宽高的盒子没用。所以在文本水平垂直居中对的时候使用。
且只对单行文本有效,多行文本不可
line-height: 200px; //垂直text-align: center; //水平
3.通过绝对定位的方式 absolute+负margin
需要知道子元素的宽高
.father {width: 200px;height: 200px;background-color: pink;position: relative;}.son {width: 50px;height: 50px;background-color: yellow;position: absolute;top: 50%;left: 50%;margin: -25px 0 0 -25px;}
4.也是绝对定位 absolute+margin:auto;
需要将各方向的距离都设置为0;再设margin:auto;
.son {width: 50px;height: 50px;background-color: yellow;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}
5.绝对定位+过渡
不需要子元素固定宽高
css3新增的transform:translate(-50%, -50%)即可
.son {width: 50px;height: 50px;background-color: yellow;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%)}
6.table-cell实现水平垂直居中:table-cell middle center组合使用
直接给父元素设置
为了明显观察,我们可以给它设置宽高与边框
注意:需要水平垂直的元素不能是块级元素(不然text-align:center不生效)
.father {width: 200px;height: 200px;background-color: pink;border: 1px solid red;display: table-cell;vertical-align: middle;text-align: center;}
7.grid(网格布局)
给父元素设置display:grid
给子元素设:align-self:center; justify-self:center;
.father {width: 200px;height: 200px;background-color: pink;border: 1px solid red;display: grid;}.son {width: 50px;height: 50px;background-color: yellow;align-self: center;justify-self: center;}