“如何实现任何元素的水平垂直居中?”前端面试常常会被问到这个似乎挺不起眼没技术含量的问题,有的朋友也就支支吾吾模模糊糊地回答面试官。这里分享四种实现元素水平垂直居中的方法,简单明朗一学就上手。
1. margin或padding配合调整
由俭入奢,第一种方法是最基础也是比较局限的,就是用margin
和padding
配合调整,按已知的大小去控制间距:
.parent {
width: 200px;
height: 200px;
background-color: #ADD8E6;
padding: 50px 0; /* (200-100)/2 上下各50px*/
box-sizing: border-box;
}
.son {
width: 100px;
height: 100px;
background-color: #DB7093;
margin: 0 auto; /*水平居中*/
}
2. 定位调整
升级一下,用定位解决。父元素relative
相对定位,子元素absolute
绝对定位,上左各50%,再用margin-top
、margin-left
负值调整。
.parent {
width: 200px;
height: 200px;
background-color: #ADD8E6;
position: relative; /*相对定位*/
}
.son {
width: 100px;
height: 100px;
background-color: #DB7093;
position: absolute; /*绝对定位*/
top: 50%;
left: 50%;
margin-top: -50px; /*返回一半的高度*/
margin-left: -50px; /*返回一半的宽度*/
}
3. css3动画调整
这个方法跟上一个雷同,优点在于代码量少一行和不需要计算数值。同样的,父元素relative
相对定位,子元素absolute
绝对定位,上左各50%,然后用css3的translate(-50%, -50%)
在x、y轴上各返回本身的一半位移。
.parent {
width: 200px;
height: 200px;
background-color: #ADD8E6;
position: relative; /*相对定位*/
}
.son {
width: 100px;
height: 100px;
background-color: #DB7093;
position: absolute; /*绝对定位*/
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /*x、y轴返回元素一半的位移*/
}
4. flex弹性布局调整
最后一种方法个人觉得是较高级的写法。html5提供了广受开发者喜爱的flex
弹性布局属性,功能十分强大实用。要实现元素水平垂直居中,只要父元素设置弹性布局,用justify-content
和align-items
属性调整主轴、副轴上居中。
.parent {
width: 200px;
height: 200px;
background-color: #ADD8E6;
display: flex; /*弹性布局*/
justify-content: center; /*子元素水平居中*/
align-items: center; /*子元素垂直居中*/
}
.son {
width: 100px;
height: 100px;
background-color: #DB7093;
}
在实战中用多几次就熟练了,十分简单,在面试官前可以挺起胸膛了!