元素居中的技巧

Cellinlab

发布于 2023-05-17 15:13:50

22200

代码可运行

文章被收录于专栏：Cellinlab's BlogCellinlab's Blog

运行总次数：0

代码可运行

# 水平

# 文本|行内元素|行内块元素

优点
- 简单快捷、兼容性好
缺点
- 只对行内内容有效
- 属性会继承影响到后代行内容
- 子元素宽度大于父元素则无效

inline-level

<html>
  <body>
    <div class="parent-1">
      <span>inline-level</span>
    </div>
  </body>
</html>
<style>
.parent-1 {
  text-align: center;
}
</style>

# 块级元素

# 块级元素一般居中

块级元素一般居中

<html>
  <body>
    <div class="parent-2">
      <div class="child-2">块级元素一般居中</span>
    </div>
  </body>
</html>
<style>
.child-2 {
  margin: 0 auto;
  width: 30%;
  background: red;
}
</style>

# 子元素含float

子元素含float

<html>
  <body>
    <div class="parent-3">
      <div class="child-3">子元素含float</div>
    </div>
  </body>
</html>
<style>
.parent-3 {
  width: fit-content;
  margin: 0 auto;
  background: #fdcb6e;
}
.child-3 {
  width: 100px;
  float: right;
  background: #ffeaa7;
}
</style>

# Flex 弹性盒子

flex弹性盒子

<html>
  <body>
    <div class="parent-4">
      <div class="child-4">flex弹性盒子</div>
    </div>
  </body>
</html>
<style>
.parent-4 {
  background: #fdcb6e;
  display: flex;
  justify-content: center;
}
.child-4 {
  width: 100px;
  background: #ff7675;
}
</style>

# 绝对定位

transform

绝对定位-transform

<html>
  <body>
    <div class="parent-5-1">
      <div class="child-5-1">绝对定位-transform</div>
    </div>
  </body>
</html>
<style>
.parent-5-1 {
  position: relative;
  width: 100%;
  height: 50px;
  background: #fdcb6e;
}
.child-5-1 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  background: #ffeaa7;
}
</style>

left: 50%;

绝对定位-left:50%

<html>
  <body>
    <div class="parent-5-2">
      <div class="child-5-2">绝对定位-left:50%</div>
    </div>
  </body>
</html>
<style>
.parent-5-2 {
  position: relative;
  width: 100%;
  height: 50px;
  background: #fdcb6e;
}
.child-5-2 {
  position: absolute;
  left: 50%;
  margin-left: calc(-0.5 * 150px);
  width: 150px;
  background: #ffeaa7;
}
</style>

left/right: 0

绝对定位-left/right:0

<html>
  <body>
    <div class="parent-5-3">
      <div class="child-5-3">绝对定位-left/right:0</div>
    </div>
  </body>
</html>
<style>
.parent-5-3 {
  position: relative;
  width: 100%;
  height: 50px;
  background: #fdcb6e;
}
.child-5-3 {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 150px;
  background: #ffeaa7;
}
</style>

# 竖直

# 行内元素

行内元素

<html>
  <body>
    <div class="parent-6">
      <span class="child-6">行内元素</span>
    </div>
  </body>
</html>
<style>
.parent-6 {
  height: 50px;
  background: #fdcb6e;
}
.child-6 {
  line-height: 50px;
  background: #ffeaa7;
}
</style>

# 块级元素

# 行内块级元素

适应IE7

行内块级元素

<html>
  <body>
    <div class="parent-7">
      <div class="child-7">行内块级元素</div>
    </div>
  </body>
</html>
<style>
.parent-7 {
  width: 100%;
  height: 50px;
  background: #fdcb6e;
}
.child-7 {
  width: 150px;
  background: #ffeaa7;
}
.parent-7::after, .child-7 {
  display: inline-block;
  vertical-align: middle;
}
.parent-7::after {
  content: '';
  height: 100%;
}
</style>

# table

优点
- 元素高度可以动态改变，不需要在CSS中定义
- 如果父元素没有足够空间时，该元素也不会被折断

table

<html>
  <body>
    <div class="parent-8">
      <div class="child-8">table</div>
    </div>
  </body>
</html>
<style>
.parent-8 {
  width: 100%;
  height: 50px;
  background: #fdcb6e;

  display: table;
}
.child-8 {
  display: table-cell;
  vertical-align: middle;

  height: 30px;
  width: 150px;
  background: #ffeaa7;
}
</style>

# flex弹性盒子

优点
- 内容块宽高任意，优雅溢出
- 可用于更复杂高级的布局技术中
缺点
- IE8/9不支持
- 需要加浏览器厂商前缀
- 渲染上可能会有一些问题

flex

<html>
  <body>
    <div class="parent-9">
      <div class="child-9">flex</div>
    </div>
  </body>
</html>
<style>
.parent-9 {
  width: 100%;
  height: 50px;
  background: #fdcb6e;

  display: flex;
  align-items: center;
}
.child-9 {
  width: 150px;
  background: #ffeaa7;
}
</style>

# 绝对定位

transform

transform

<html>
  <body>
    <div class="parent-10">
      <div class="child-10">transform</div>
    </div>
  </body>
</html>
<style>
.parent-10 {
  width: 100%;
  height: 50px;
  background: #fdcb6e;
  position: relative;
}
.child-10 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  width: 150px;
  background: #ffeaa7;
}
</style>

top:50%

top:50%

<html>
  <body>
    <div class="parent-11">
      <div class="child-11">top:50%</div>
    </div>
  </body>
</html>
<style>
.parent-11 {
  width: 100%;
  height: 50px;
  background: #fdcb6e;

  position: relative;
}
.child-11 {
  position: absolute;
  top: 50%;
  margin-top: calc(-0.5 * 30px);
  height: 30px;
  width: 150px;
  background: #ffeaa7;
}
</style>

top/bottom

top/bottom

<html>
  <body>
    <div class="parent-12">
      <div class="child-12">top/bottom</div>
    </div>
  </body>
</html>
<style>
.parent-12 {
  width: 100%;
  height: 50px;
  background: #fdcb6e;

  position: relative;
}
.child-12 {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;

  height: 30px;
  width: 150px;
  background: #ffeaa7;
}
</style>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/12/8，如有侵权请联系 cloudcommunity@tencent.com 删除

html