CSS水平垂直居中(最常见的三种方案flex、grid、absolute)

本文简单介绍一下现代 CSS 中最常见的三种水平垂直居中方案。

html:

html 复制代码
<div class="container">
  <div class="content"></div>
</div>

css:

css 复制代码
.container {
  width: 500px;
  height: 500px;
  border: 1px solid #000;

  .content {
    width: 200px;
    height: 200px;
    background-color: #ccc;
  }
}

Flex 布局

方案1:父元素设置 flex 布局,并设置主轴以及交叉轴的对齐方式:

css 复制代码
.container {
  width: 500px;
  height: 500px;
  border: 1px solid #000;
  display: flex;
  justify-content: center;
  align-items: center;

  .content {
    width: 200px;
    height: 200px;
    background-color: #ccc;
  }
}

方案2:父元素设置 flex 布局,子元素设置 margin: auto

css 复制代码
.container {
  width: 500px;
  height: 500px;
  border: 1px solid #000;
  display: flex;

  .content {
    width: 200px;
    height: 200px;
    background-color: #ccc;
    margin: auto;
  }
}

Grid 布局

父元素设置 grid 布局,以及 place-items: centerplace-itemsalign-itemsjustify-items 的简写形式。

Grid 的兼容性不如 Flex,对于一些比较老的浏览可能不太支持。

css 复制代码
.container {
  width: 500px;
  height: 500px;
  border: 1px solid #000;
  display: grid;
  place-items: center;

  .content {
    width: 200px;
    height: 200px;
    background-color: #ccc;
  }
}

绝对定位 absolute

使用绝对定位会使元素脱离文档流,一般常用于弹窗、对话框等。

父元素设置相对定位,子元素设置绝对定位,设置 top、left 以及 transform。

css 复制代码
.container {
  position: relative;
  width: 500px;
  height: 500px;
  border: 1px solid #000;

  .content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background-color: #ccc;
  }
}

topleft属性都设置为50%。这会将.content元素的左上角定位到其父元素(.container)的中心。transform: translate(-50%, -50%);被应用到.content元素上。这会将.content元素自身向左和向上移动其自身宽度和高度的50%,从而使得.content元素的中心与其父元素的中心对齐,实现了居中。

相关推荐
web Rookie23 分钟前
JS类型检测大全:从零基础到高级应用
开发语言·前端·javascript
Au_ust30 分钟前
css:基础
前端·css
帅帅哥的兜兜30 分钟前
css基础:底部固定,导航栏浮动在顶部
前端·css·css3
yi碗汤园34 分钟前
【一文了解】C#基础-集合
开发语言·前端·unity·c#
就是个名称34 分钟前
购物车-多元素组合动画css
前端·css
编程一生1 小时前
回调数据丢了?
运维·服务器·前端
丶21361 小时前
【鉴权】深入了解 Cookie:Web 开发中的客户端存储小数据
前端·安全·web
Missmiaomiao2 小时前
npm install慢
前端·npm·node.js
程序员爱技术4 小时前
Vue 2 + JavaScript + vue-count-to 集成案例
前端·javascript·vue.js
并不会5 小时前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器