【HTML元素居中】元素水平垂直居中的常用方法

HTML元素居中

元素居中

常用水平垂直居中

行元素、块元素都可以使用。

  1. flex + center
css 复制代码
  .parent {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .child {
    width: 100px;
    height: 100px;
    border: 1px solid red;
  }
html 复制代码
  <div class="parent">
    <div class="child"></div>
  </div>

parent有多个child时, 会以所有child宽高之和 来居中显示到parent元素上

  1. flex + margin
css 复制代码
  .parent {
    display: flex;
  }
  .child {
    border: 1px solid red;
  }
html 复制代码
  <div class="parent">
    <div class="child"></div>
  </div>

parent有多个child时, 子元素会平均分配父节点的宽高

  1. position: absolute; transform
    父元素高度必须设置,或者父元素高度由其他子元素撑开. 不然会出现父元素高度塌陷
css 复制代码
.parent {
  height: 300px;
  position: relative;
  border:1px solid red;
}

.child {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 1px solid red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%);
}
html 复制代码
<div class="parent">
  <div class="child"></div>
</div>

parent有多个child时, 设置定位absolute的元素会居中显示,其他元素从父元素开始的位置按照从上到下、从左到右的顺序依次排列

  1. grid place-item: center
css 复制代码
  .parent {
    height: 300px;
    display: grid;
    place-items: center;
    border: 1px solid red;
  }

  .child {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 1px solid red;
  }
html 复制代码
  <div class="parent">
    <div class="child"></div>
  </div>

parent有多个child时, 子元素水平居中,垂直方向上会平均分配父节点的高度

行内元素居中

  • 水平居中

    给父元素添加 text-align: center, 且子元素可继承text-align属性

  • 垂直居中

    给父元素添加 display: table-cell; vertical-align: middle;

    文本垂直居中:

    给居中元素添加 height: 30px;line-height: 30px

  • 水平垂直居中
    table-cell + vertical-align + text-align

    css 复制代码
      .parent {
        width: 300px;
        height: 300px;
        border: 1px solid red;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
      }
    
      .child {
        display: inline-block;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        border: 1px solid red;
      }
    html 复制代码
    <div class="parent">
      <span class="child"></span>
    </div>

块级元素居中

  • 水平居中

    1. margin: 0 auto

    2. margin-left: calc(50% - width/2px)

      子元素width需固定

    css 复制代码
    .parent {
      height: 300px;
      border: 1px solid red;
    }
    /* margin + auto */
    .child-1 {
      width: 35px;
      height: 35px;
      border-radius: 50%;
      border: 1px solid red;
      margin: 10px auto;
    }
    /* margin-left + calc */
    .child-2 {
      width: 420px;
      height: 35px;
      margin-left: calc(50% - 210px);
      border: 1px solid red;
    }
    html 复制代码
    <div class="parent">
      <div class="child-1"></div>
      <div class="child-2"></div>
    </div>
  • 水平垂直居中
    position: absolute; left; top; bottom; right; margin: auto

    子元素宽高固定。

    css 复制代码
    .parent {
      height: 300px;
      border: 1px solid red;
      position: relative;
    }
    
    .child {
      width: 35px;
      height: 35px;
      border-radius: 50%;
      border: 1px solid red;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
    html 复制代码
    <div class="parent">
      <div class="child"></div>
    </div>

margin

当元素脱离默认文档流时(浮动,绝对定位,固定定位),margin失效

inline-blockinline设置margin:0 auto 时是没用的

相关推荐
蓝胖子的多啦A梦1 小时前
低版本Chrome导致弹框无法滚动的解决方案
前端·css·html·chrome浏览器·版本不同造成问题·弹框页面无法滚动
ะัี潪ิื3 小时前
精灵图(雪碧图)的生成和使用
java·css
iuuia3 小时前
02--CSS基础
前端·css
苦夏木禾4 小时前
css实现表格中最后一列固定
前端·javascript·css
Dcc9 小时前
纯 css 实现前端主题切换+自定义方案
前端·css
珹洺10 小时前
Java-Spring入门指南(二十四)SSM整合HTML:解决CSS/JS静态资源被过滤问题
java·spring·html
CodeCraft Studio10 小时前
Excel处理控件Aspose.Cells教程:使用 Python 将 HTML 转换为 Excel
python·html·excel·aspose·aspose.cells·html转excel
starxg12 小时前
bkhtmltopdf - 高性能 HTML 转 PDF 工具(代替 wkhtmltopdf)
java·pdf·html·wkhtmltopdf·htmltopdf
华仔啊12 小时前
如何用 Vue3 打造高级音乐播放器?进度条+可视化效果,代码简洁可复用!
前端·css·vue.js
一只小风华~13 小时前
Vue Router 导航守卫
java·前端·javascript·vue.js·笔记·html