面试被问到最多的垂直水平居中,那就做个总结吧!!

232 阅读1分钟

1.水平居中常见实现方式

  • 对于行内元素(inline):父元素
text-align:conter
  • 对于块级元素(block):有宽度把
margin-leftmargin-right设成auto

不能设置宽度的变成行内块处理即可

2.垂直居中常见的实现方式

  • 对文字:其核心是设置行高(line-height)等于包裹他的盒子的高度
  • 对元素:父级元素设置:display:table-cell;vertical-align:middle子元素设置为line-block

3.水平垂直居中的常见实现方式

  • 不定宽高
.outer {
  position: relative;
}
.inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
} //兼容性差

  • 定宽高
.outer {
  position: relative;
}
.inner {                                     。inner{																							}
  position: absolute;						position:absolute			
  left: 50%;							top:0;
  top: 50%;							left:0;
  margin-left: -50px;					        right:0;
  margin-top: -50px;
                                                                bottom:0;
  
}								margin:auto;}//有宽高但是不需要计算宽高

3.flex布局

display: flex;

justify-content: center; /* 水平居中 */

align-items: center; /* 垂直居中 */(多行时:align-content:center副轴居中)//兼容性差