前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >实现元素居中的 10 个CSS方法

实现元素居中的 10 个CSS方法

作者头像
唐志远
发布2022-10-27 18:52:36
4100
发布2022-10-27 18:52:36
举报
文章被收录于专栏:FE32 CodeFE32 Code

absolute + (-margin)

如果元素的宽度和高度已知,我们可以使用至少 3 种方法来使元素居中。例如,在下图中,小猫的宽度和高度分别为 “500px” 和 “366px” 。我们应该如何居中?

用 “absolute + (-margin)” 很容易完成, 代码如下:

代码语言:javascript
复制
<div class="container">
  <img class="cat" src="https://images.unsplash.com/photo-1533743983669-94fa5c4338ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1584&q=80" alt="">
</div>
代码语言:javascript
复制
.container {
  width: 800px;
  height: 600px;
  border: solid 1px #e3c1a9;
  border-radius: 30px;
  /* Key css */
  position: relative;
}
.cat{
  width: 500px;
  height: 366px;
  border-radius: 50%;
  position: absolute;
  /* Key css */
  left: 50%;
  top: 50%;
  /* half the width */
  margin-left: -250px;
  /* half the height */
  margin-top: -183px;
}

这种方法简单易懂,兼容性好;缺点是我们需要知道子元素的宽高。

absolute + margin auto

我们还可以通过将所有方向的距离设置为 0 ,并将边距设置为自动来使小猫居中。

代码语言:javascript
复制
.container {
  width: 800px;
  height: 600px;
  border: solid 1px #e3c1a9;
  border-radius: 30px;
  position: relative;
}
.cat{
  width: 500px;
  height: 366px;
  border-radius: 50%;
  /* Key css */
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

和第一种方法一样,兼容性也挺好,缺点是需要知道子元素的宽高。

absolute + calc

CSS3 带来了 calc 计算属性,它允许我们通过它来居中一个元素,代码如下:

代码语言:javascript
复制
.container {
  width: 800px;
  height: 600px;
  border: solid 1px #e3c1a9;
  border-radius: 30px;
  position: relative;
}
.cat{
  width: 500px;
  height: 366px;
  border-radius: 50%;
  position: absolute;
  /* Key css */
  top: calc(50% - 183px);
  left: calc(50% - 250px);
}

该方法的兼容性取决于calc的兼容性,缺点是需要知道子元素的宽高。

上面介绍的三种方法必须提前知道元素的宽高,但元素的宽高不确定怎么办?于是就有了flex

flex

代码语言:javascript
复制
<div class="container">
  <span contenteditable="true" class="content">hello medium</span>
</div>
代码语言:javascript
复制
.container {
  width: 400px;
  height: 200px;
  border: solid 1px #e3c1a9;
  border-radius: 30px;
  /* Key css */
  display: flex;
  align-items: center;
  justify-content: center;
}
.content{
  padding: 20px;
  border-radius: 10px;
  background-color: #e3c1a9;
  color: #ffffff;
}

可以用很少的代码来居中一个元素,是我最喜欢的使用方式。

grid

flex一样,grid也可以非常方便地用于使元素居中。

代码语言:javascript
复制
.container {
  width: 400px;
  height: 200px;
  border: solid 1px #e3c1a9;
  border-radius: 30px;
  /* Key css */
  display: grid;
}

.content{
  /* Key css */
  align-self: center;
  justify-self: center;
  padding: 20px;
  border-radius: 10px;
  background-color: #e3c1a9;
  color: #ffffff;
}

absolute + transform

使用变换,我们还可以在事先不知道元素的宽度和高度的情况下使元素居中。

代码语言:javascript
复制
.container {
  width: 400px;
  height: 200px;
  border: solid 1px #e3c1a9;
  border-radius: 30px;
  /* Key css */
  position: relative;
}
.content{
  /* Key css */
  position: absolute;
  left: 50%;
  top: 50%;
  /* Key css */
  transform: translate(-50%, -50%);
  padding: 20px;
  border-radius: 10px;
  background-color: #e3c1a9;
  color: #ffffff;
}

以上6种方式比较容易理解,在我们的工作中也经常用到,接下来的 4 种方法似乎使用频率较低,但也值得学习。

text-align + line-height + vertical-align

首先,我们可以将 span 的 “display” 属性设置为 “inline-block”。然后通过设置容器的text-align属性为center,span 元素可以水平居中。结合 line-height和其他属性使其垂直居中。

代码语言:javascript
复制
.container {
  width: 400px;
  height: 200px;
  border: solid 1px #e3c1a9;
  border-radius: 30px;
  /* Key css */
  text-align: center;
  line-height: 200px;
  font-size: 0px;
}
.content{
  font-size: 16px;
  /* Key css */
  display: inline-block;
  vertical-align: middle;
  line-height: initial;
  text-align: left;
  padding: 20px;
  border-radius: 10px;
  background-color: #e3c1a9;
  color: #ffffff;
}

css-table

CSS新的table属性让我们可以将普通元素变成表格元素的真实效果,通过这个特性,一个元素也可以居中。

代码语言:javascript
复制
.container {
  width: 400px;
  height: 200px;
  border: solid 1px #e3c1a9;
  border-radius: 30px;
  /* Key css */
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.content {
  /* Key css */
  display: inline-block;
  padding: 20px;
  border-radius: 10px;
  background-color: #e3c1a9;
  color: #ffffff;
}

writing-mode

过去,我习惯使用writing-mode将内容的布局方向更改为垂直。

但令人惊奇的是它还可以使元素居中。不过这种方法有点难懂,代码量会比较多。

代码语言:javascript
复制
<div class="container">
  <div class="content-wrap">
    <span contenteditable="true" class="content">hello medium</span>
  </div>
</div>
代码语言:javascript
复制
.container {
  width: 400px;
  height: 200px;
  border: solid 1px #e3c1a9;
  border-radius: 30px;
  /* Key css */
  writing-mode: vertical-lr;
  text-align: center;
}
.content-wrap{
  /* Key css */
  writing-mode: horizontal-tb;
  display: inline-block;
  text-align: center;
  width: 100%;
}
.content {
  /* Key css */
  display: inline-block;
  margin: auto;
  text-align: left;
  padding: 20px;
  border-radius: 10px;
  background-color: #e3c1a9;
  color: #ffffff;
}

table(不推荐)

提到它只是作为学习的一个例子,我不建议你在工作中使用它,因为它(在我看来有点)很糟糕。

代码语言:javascript
复制
<table>
  <tbody>
    <tr>
      <td class="container">
        <span contenteditable="true" class="content">hello medium</span>
      </td>
    </tr>
  </tbody>
</table>
代码语言:javascript
复制
.container {
  width: 400px;
  height: 200px;
  border: solid 1px #e3c1a9;
  border-radius: 30px;
  /* Key css */
  text-align: center;
}
.content {
  /* Key css */
  display: inline-block;
  padding: 20px;
  border-radius: 10px;
  background-color: #e3c1a9;
  color: #ffffff;
}

原文链接:10 CSS Tricks You Should Know for Centering Elements

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-08-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • absolute + (-margin)
  • absolute + margin auto
  • absolute + calc
  • flex
  • grid
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档