绝对元素的水平定位
Posted
技术标签:
【中文标题】绝对元素的水平定位【英文标题】：Horizontal positioning of an absolute element 【发布时间】：2021-08-08 17:49:00 【问题描述】：我有this pen here，当它点击媒体查询（最大宽度：475px）时，横幅中的按钮应该落在文本下方并在横幅中居中。我的问题是按钮从媒体查询上方的右侧开始，然后需要放下并居中。我看过here、here和这个***，还有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
【参考方案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>【讨论】：
以上是关于绝对元素的水平定位的主要内容，如果未能解决你的问题，请参考以下文章
总结一下各种居中（内联元素块级元素浮动元素绝对定位元素）*（水平垂直）
如何在 100% 宽度的 div 内水平居中绝对定位的元素？ [复制]