绝对元素的水平定位答案

【问题标题】：Horizontal positioning of an absolute element绝对元素的水平定位
【发布时间】：2021-08-08 17:49:00
【问题描述】：

我有this pen here，当它点击媒体查询（最大宽度：475px）时，横幅中的按钮应该落在文本下方并在横幅中居中。我的问题是按钮从媒体查询上方的右侧开始，然后需要放下并居中。我看过here、here和这个stackoverflow，还有this one和this one，还有这个stack和this one，但都没有。

如果有人可以在 jump on my codepen 并帮助我找出缺少的内容，那就太好了。

这里是代码转储

<!DOCTYPE html>
<html>
<head>
  <base href="https://s3.ca-central-1.amazonaws.com/whatever/index.esm.js"/>
  <style>
      * {
 box-sizing: border-box;
}

#banner-container {
          padding: 32px;
          border-radius: 12px;
          background: linear-gradient(90deg, rgba(231,248,250,1) 0%, rgba(220,255,226,1) 100%);
          display: flex;
          flex-direction: row;
          height: 152px;
          position: relative;
  width: 100%;
      }

    
   

      #button-container {
          position: absolute;
          right: 32px;
          transform: translateY(-50%);
          top: 50%;
      }
      #cta-button {
          width: 192px;
          height: 60px;
          padding: 16px 23px 16px 21px;
          border-radius: 30px;
          background-color: #16a55a;
          cursor: pointer;
          border: none;
      }
      #cta-button:hover {
          box-shadow: 0 5px 10px 0 rgba(22, 165, 90, 0.5);
      }
      #cta-button:active {
          background-color: #05823f;
      }
      #cta-button span {
          font-family: Lato, sans-serif;
          font-size: 20px;
          font-weight: bold;
          font-stretch: normal;
          font-style: normal;
          line-height: 1.4;
          letter-spacing: normal;
          text-align: center;
          color: #ffffff;
      }
    @media screen and (max-width: 475px) {
      #banner-container {
        height: 200px;
      }
      #button-container {
        margin-top: 20px !important;
        transform: translateX(-50%);
        left: 50%;
      }
      #cta-button {
        margin: 0 auto;
      }
      #text-container {
        margin: 0 auto;
      }
    }
      #top-text {
          font-family: Lato, sans-serif;
          font-size: 14px;
          font-weight: normal;
          font-stretch: normal;
          font-style: normal;
          line-height: 1.43;
          letter-spacing: normal;
          color: #3c4142;
      }
      #main-text {
          font-family: Lato, sans-serif;
          font-size: 24px;
          font-weight: bold;
          font-stretch: normal;
          font-style: normal;
          line-height: 1.33;
          letter-spacing: normal;
          color: #404040;
      }
      #bottom-text {
          font-family: Lato, sans-serif;
          font-size: 14px;
          font-weight: bold;
          font-stretch: normal;
          font-style: normal;
          line-height: 1.43;
          letter-spacing: normal;
          color: #3c4142;
      }
      #text-container {

      }
      #text-container span {
          line-height: 20px;
          display: flex;
          flex-direction: column;
      }
      #text-container span:nth-child(2), #text-container span:nth-child(3) {
          margin-top: 8px;
      }
  </style>
</head>
<body>

<div id="banner-container">
  <div id="text-container">
    <span id="top-text">Partner exclusive webinar</span>
    <span id="main-text">Be a sales beast</span>
    <span id="bottom-text">May 4 | 1 pm EST</span>
  </div>
  <div id="button-container">
    <button id="cta-button">
      <span>Register now</span>
    </button>
  </div>
</div>

</body>
</html>

【问题讨论】：

为什么在父级上使用absolute而不是flex属性，例如：justify-content: space-between;、align-items: center;和flex-wrap: wrap;？然后为小屏应用 100% 宽度并添加text-align: center;?
如本例：jsfiddle.net/564ohs2r

标签： css

【解决方案1】：

经验法则：如果可以避免绝对定位，请这样做。

这里不需要绝对定位，简单的flex布局就可以实现你想要的

旧：

#button-container {
    position: absolute;
    right: 32px;
    transform: translateY(-50%);
    top: 50%;
}

新功能：

#button-container {
    align-self: center;
    margin-left: auto;
}

效果一样

align-self: center; 垂直居中

margin-left: auto; 占用按钮左侧和第一个兄弟More on this 右侧之间的所有空间

当媒体来袭时

@media screen and (max-width: 475px) {
    #banner-container {
        height: 200px;
        flex-direction: column; /* Drop the button down */
    }

    #button-container {
        margin: 0 auto; /* to center */
    }
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

#banner-container {
    padding: 32px;
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(231,248,250,1) 0%, rgba(220,255,226,1) 100%);
    display: flex;
    flex-direction: row;
    height: 152px;
    position: relative;
    width: 100%;
}

#button-container {
    align-self: center;
    margin-left: auto;
}

#cta-button {
    width: 192px;
    height: 60px;
    padding: 16px 23px 16px 21px;
    border-radius: 30px;
    background-color: #16a55a;
    cursor: pointer;
    border: none;
}

#cta-button:hover {
    box-shadow: 0 5px 10px 0 rgba(22, 165, 90, 0.5);
}

#cta-button:active {
    background-color: #05823f;
}

#cta-button span {
    font-family: Lato, sans-serif;
    font-size: 20px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.4;
    letter-spacing: normal;
    text-align: center;
    color: #ffffff;
}

@media screen and (max-width: 475px) {
    #banner-container {
        height: 200px;
        flex-direction: column;
    }

    #button-container {
        margin: 0 auto;
    }

    #cta-button {
        margin: 0 auto;
    }

    #text-container {
        margin: 0 auto;
    }
}

#top-text {
    font-family: Lato, sans-serif;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.43;
    letter-spacing: normal;
    color: #3c4142;
}

#main-text {
    font-family: Lato, sans-serif;
    font-size: 24px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: normal;
    color: #404040;
}

#bottom-text {
    font-family: Lato, sans-serif;
    font-size: 14px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.43;
    letter-spacing: normal;
    color: #3c4142;
}

#text-container {
}

#text-container span {
    line-height: 20px;
    display: flex;
    flex-direction: column;
}

#text-container span:nth-child(2), #text-container span:nth-child(3) {
    margin-top: 8px;
}

<div id="banner-container">
  <div id="text-container">
    <span id="top-text">Partner exclusive webinar</span>
    <span id="main-text">Be a sales beast</span>
    <span id="bottom-text">May 4 | 1 pm EST</span>
  </div>
  <div id="button-container">
    <button id="cta-button">
      <span>Register now</span>
    </button>
  </div>
</div>

【讨论】：