【前端面试题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;
}
相关推荐
勤劳打代码32 分钟前
妙笔生花 —— Flutter 实现飞入动画
前端·flutter·设计模式
银安39 分钟前
CSS排版布局篇(4):浮动(float)、定位(position) 、层叠(Stacking)
前端·css
昭昭日月明41 分钟前
mac 效率工具:Raycast 的扩展开发
前端·mac·设计
white-persist1 小时前
XXE 注入漏洞全解析:从原理到实战
开发语言·前端·网络·安全·web安全·网络安全·信息可视化
练习时长一年1 小时前
Spring内置功能
java·前端·spring
SHUIPING_YANG1 小时前
完美迁移:将 nvm 和 npm 完全安装到 Windows D 盘
前端·windows·npm
lypzcgf2 小时前
Coze源码分析-资源库-编辑数据库-前端源码-核心组件
前端·数据库·源码分析·coze·coze源码分析·ai应用平台·agent平台
勤奋菲菲2 小时前
Koa.js 完全指南:下一代 Node.js Web 框架
前端·javascript·node.js
Emrys_2 小时前
Redis 为什么这么快?一次彻底搞懂背-后的秘密 🚀
后端·面试