收集整理面试常用CSS题目

水平居中

1. 行内元素 使用 text-align: center;
2. 块级元素

margin: 0 auto;

margin:'0 auto'; 只对块元素起作用，还要设置width属性。

注：img/input/button等自带宽度，可不设置。 www.zhangxinxu.com/study/20131…

3. 绝对定位

.son {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

注意外部父元素需要包裹 relative方便 元素定位寻找

4. flex

.parent {
    display: flex;
    justify-content: center;
}

5. grid

.father4 {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
  justify-content: center;
  justify-items: center;
  align-content: center;
}
.child4 {
grid-column-start: 2;
grid-column-end: 2;
}  

ruanyifeng.com/blog/2019/0… 就是要塞到中间的元素里面 下面是playground的代码方便练习

垂直居中

1. 行内元素 单行文本可以使用line-height撑起元素，和外部元素高度一样

2. 行内块级元素

参照magin auto 3. 绝对定位 3.2 transform

.son {
    position: absolute;
    top: 50%;
    transform: translate( 0, -50%);
}

4. flex

参照上面

5. grid

.father4 {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
  justify-content: center;
  justify-items: center;
  align-content: center;
}
.child4 {
grid-column-start: 2;
grid-column-end: 2;
 grid-row-start: 2;
  grid-row-end: 2;
}  

ruanyifeng.com/blog/2019/0…

分列布局

1. 双飞翼 与圣杯类似但是 双飞翼布局 是通过content内的inner完成效果

2. 圣杯布局 float 布局，然后用margin将元素拉上去，之后通过left修改位置

3. flex 布局 结合 flex-shrik

4. grid 分成三列即可

参考文献

juejin.cn/post/684490…

juejin.cn/post/684490…

juejin.cn/post/711857…