Html 如何垂直平移一个元素，使其新位置位于另外两个元素之间

#header {
  background: yellow;
  height: 50px;
}

#bar {
  background: green;
  height: 50px;
}

#main-content {
  background: blue;
  height: 50px;
}

<div id="header">header</div>
<div id="bar">bar</div>
<div id="main-content">main content</div>

#header {
  background: yellow;
  height: 50px;
}

#bar-container {
  position: relative;
  background: green;
  height: 50px;
  margin: 0 50px;
}

#bar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

#main-content {
  background: blue;
  height: 50px;
}

<div id="header">header</div>
<div id="bar-container">
  <div id="bar">bar</div>
</div>
<div id="main-content">main-content</div>

#header {
  background: yellow;
  height: 50px;
  padding: 30px 0;
}

#bar-container {
  height: 0; /* 0 height */
  /* center vertically */
  display: flex;
  align-items: center;
  /**/
}

#bar {
  height: 50px;
  width: 80%; 
  margin-inline: auto; /* center horizontally */
  background: green;
}

#main-content {
  background: blue;
  height: 50px;
  padding: 30px 0;
}

<div id="header">header</div>
<div id="bar-container">
  <div id="bar">bar</div>
</div>
<div id="main-content">main-content</div>

Html相关问答推荐

HTML横幅未正确对齐页面顶部

为什么在这种情况下是弹性基础：自动不解决内容的大小？

UseEffect()从不调用preact

使用网格时图像溢出容器高度

将输入字段下方的两个按钮设置为两侧对齐

使用无限数量的元素创建特定的CSS网格

在NzMessageService中传递动态TemplateRef- Angular 15

使用响应迅速的网格系统，将两列保持在同一行，同时允许更多列用于更大的屏幕

如何将CSS滤镜仅应用于背景图像

希望平稳过渡到悬停状态

如何删除FONT创建的文本下方的空格

图像如何能达到 HTML 表格的全宽？

Cargo 在网格中的排列

提交前的验证表单未显示任何验证消息？

使用 CSS flexbox 和溢出顶部而不是底部

打开 Bootstrap 模式时无法获得模糊的背景

我正在try 向我预先存在的导航栏添加响应式汉堡包导航，但由于某种原因它没有显示

标题之间和之后的 Hr 线

无法在 css 的 body 标签中正确呈现(内联显示)

无法使用 Reactjs 多次更新本地存储