【前端面试题3】如何实现一个元素的水平垂直居中

以下是题目的布局代码:

html 复制代码
<div class="container">
  <div class="item" style="width: 100px; height: 100px; background: #999;">
    块状元素
  </div>
</div>
 
<div class="container">
  <div class="item">不定高宽的块状元素</div>
</div>
 
<div class="container">
  <span class="item">行内元素</span>
</div>
css 复制代码
.container {
  // 把代码写在这里
}
 
.container {
  height: 20rem;
  background: #ccc;
  margin: 1rem;
}

1.flex方法:

css 复制代码
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

2.grid方法:

css 复制代码
.container {
  display: grid;
  place-items: center;
}

css 复制代码
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

3.绝对定位方法:

css 复制代码
.container {
  position: relative;
}

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

.item {
  padding: 1rem;
  border: 1px solid #999;
}

.container {
  height: 12rem;
  background: #ccc;
  margin: 1rem;
}
相关推荐
mCell19 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip19 小时前
Node.js 子进程:child_process
前端·javascript
excel1 天前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
倔强青铜三1 天前
苦练Python第46天:文件写入与上下文管理器
人工智能·python·面试
excel1 天前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼1 天前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping1 天前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙1 天前
[译] Composition in CSS
前端·css
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix1 天前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts