这是考察css的基础的问题,一般有过开发经验的至少都能答出来1-2种
如果你能回答3-4种,那么就会给面试官留下你的知识比较全面的印象。
水平居中:
1. 行内元素:
text-align: center;
2. 块级元素
margin: 0 auto;
3. 绝对定位50% + 自我位移50%
position:absolute;
left: 50%;
transform: translateX(-50%);
4. flex布局
display:flex;
justify-content: center;
垂直居中
5. 设置行高值为本元素的高度:
height: 100px;
line-height: 100px;
6. 绝对定位50% + 自我位移50%:
position:absolute;
top: 50%;
transform: translateY(-50%);
7. flex布局
display:flex;
align-items: center;
8. table布局
父元素:
display:table;
子元素:
display: table-cell;vertical-align: middle;