1、 文字居中:
第一种方式:当用text-align:center时,达到的是水平居中的效果,那再用vertical-align:middle;其实是实现不了垂直居中的,此时就需要用到display:table-cell去协助达到垂直居中的效果。 第二种方式:
text-align:center实现的是水平居中的效果,line-height高度要跟其元素设置的高度等同的情况下,才可以达到垂直居中的效果。
效果如下:
3、CSS中实现盒子水平垂直居中的方法
body {background-color: #6ed0ff; // 蓝色}.father {background-color: #be33ec; // 紫色border-radius: 20px; //圆角box-shadow: 0 0 15px rgb(0, 0, 0); //阴影margin: 100px auto;width: 300px;height: 300px;}.son {background-color: #fcff00; // 黄色border-radius: 20px;box-shadow: 0 0 10px rgb(0, 0, 0);width: 100px;height: 100px;}
原始效果:
要实现的效果:(黄色的盒子水平垂直居中)
方法一:
grid
.father {display: grid;}.son {align-self: center;justify-self: center;}
方法二:
absolute + 负margin
// 子绝父相.father {position: relative; //相对定位}.son {position: absolute; // 绝对定位left: 50%;top: 50%;margin-left: -50px;margin-top: -50px;}
方法三:
absolute + transform
.father {position: relative;}.son {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}
方法四:
absolute + margin: auto
.father {position: relative;}.son {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;}
方法五:
flex
.father {display: flex; // 弹性盒子justify-content: center;align-items: center;}
方法六:
margin+transfrom
.father {overflow: hidden;}.son {margin: 50% auto;transform: translateY(-50%);}
方法七:
table-cell
.father {display: table-cell;text-align: center;vertical-align: middle;}.son {display: inline-block;}
方法八:
inline-block + vertical-align
.father {text-align: center;line-height: 300px;}.son {display: inline-block;vertical-align: middle;}