【前端面试题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;
}
相关推荐
程序猿阿伟2 小时前
《首屏加载优化手册:Vue3+Element Plus项目提速的技术细节》
前端·javascript·vue.js
roykingw2 小时前
【思想比实现更重要】高并发场景下如何保证接口幂等性
java·web安全·面试
尘觉2 小时前
面试-浅复制和深复制?怎样实现深复制详细解答
javascript·面试·职场和发展
fruge3 小时前
Vue Pinia 状态管理实战指南
前端·vue.js·ubuntu
绝无仅有3 小时前
某教育大厂面试题解析:MySQL索引、Redis缓存、Dubbo负载均衡等
vue.js·后端·面试
sean3 小时前
开发一个自己的 claude code
前端·后端·ai编程
mapbar_front3 小时前
面试谈薪资指南:掌握主动权的关键策略
面试
用户21411832636024 小时前
dify案例分享-用 Dify 一键生成教学动画 HTML!AI 助力,3 分钟搞定专业级课件
前端
太过平凡的小蚂蚁5 小时前
Kotlin 协程中常见的异步返回与控制方式(速览)
开发语言·前端·kotlin
007php0076 小时前
京东面试题解析:同步方法、线程池、Spring、Dubbo、消息队列、Redis等
开发语言·后端·百度·面试·职场和发展·架构·1024程序员节