CSS居中的四种方法

总的来说比较常用的有四种方法:Flexbox、Grid、Transform、Table,而至于在工作中你需要使用哪种方法,这需要你行选择!

描述

在前端开发中,居中布局是我们常用的写法,那么有那些居中布局的方式呢,这里为大家列举四种。

开始

Flexbox

使用Flexbox布局来进行居中或者上下垂直,是现代型布局中常用的方式,只需要在父级容器中使用几行代码即可,如下:

<div class="flexbox-centering">
  <div>居中</div>
</div>
<style>
  .flexbox-centering {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}
</style>

Grid

使用Grid布局与Flexbox类似,也是一种常见的布局方式,代码如下:

<div class="grid-centering">
  <div class="child">居中</div>
</div>
<style>
  .grid-centering {
  display: grid;
  justify-content: center;
  align-items: center;
  height: 100px;
}
</style>

Transform

使用css的Transform来进行居中,这将取决于父级容器是相对定位:position: relative,从而子元素进行绝对定位:position: absolute,代码如下:

<div class="parent">
  <div class="child">居中</div>
</div>
<style>
.parent {
  border: 1px solid #9C27B0;
  height: 250px;
  position: relative;
  width: 250px;
}

.child {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
  </style>

Table

Table相对于其他三种方式来说是一种比较古老的布局方式,在技术相对于古老的浏览器中可能会用到,代码如下:

<div class="container">
  <div class="center"><span>居中</span></div>
</div>
<style>
  .container {
  border: 1px solid #9C27B0;
  height: 250px;
  width: 250px;
}

.center {
  display: table;
  height: 100%;
  width: 100%;
}

.center > span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
</style>

总结

总的来说比较常用的有四种方法:Flexbox、Grid、Transform、Table,而至于在工作中你需要使用哪种方法,这需要你行选择!

人已赞赏
实用片段

js将毫秒转化为天、时、分、秒

2021-3-4 17:18:12

BUG解决

flutter ios module 'xxx' not found

2020-9-21 15:46:06

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索