text-align: center; line-height: 单前元素高度;
1 使用绝对定位
/* 需要固定宽高 */ position: absolute; top:0; left: 0; bottom: 0; right: 0; width: xxx; height: xxx margin: auto;
2 使用绝对定位+ calc()
/* 需要知道具体的元素宽高值 */ position: absolute; width: xxx; height: xxx; top: calc(50% - xxx/2); left: calc(50% - xxx/2)
3. 使用绝对定位+transform
/* 不需要知道元素的宽高 */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
4. 使用display:flex;
display: flex; justify-content: center; align-items: center;
如对本文有疑问, 点击进行留言回复!!
CSS中的两个特殊值用于控制层叠的inherit和initial的方法
CSS3 input框的实现代码类似Google登录的动画效果
CSS 容器背景 10 种颜色渐变Demo(linear-gradient())
详解CSS文件中的4种引入方式:行内,内联式,外部式,导入式
网友评论