HTML / CSS如何在绝对DIV中居中DIV [重复]
Posted
技术标签:
【中文标题】HTML / CSS如何在绝对DIV中居中DIV [重复]【英文标题】：HTML/CSS How to center DIV inside absolute DIV [duplicate] 【发布时间】：2017-02-28 06:59:22 【问题描述】：我有一个无法解决的问题。我试图将这个黑框居中在具有绝对位置的红框内。我尝试将黑匣子设置为相对位置，但我觉得我错过了一些东西。
最终，我正在尝试制作顶部标题。
这是一张图片header-image.jpg
帮助？
body.esc-layout
min-width: 960px;
margin: 0 auto;
.promo-bar
display: block;
.promo-bar .customer-care-wrapper
float: left;
max-width: 50%;
.promo-bar .customer-care
font-size: 11px;
color: #000;
margin-left: 15px;
display: block;
.promo-bar
width: 100%;
min-height: 32px;
position: relative;
height: auto;
overflow: visible;
z-index: 5;
background-color: #EEE;
overflow: hidden;
.promo-bar .service-message-wrapper
padding-top: 2px;
max-width: 50%;
margin: 0 auto;
position: relative;
.service-message-wrapper .service-banner
position: absolute;
left: 0px;
right: 0px;
text-align: center;
background: red;
.caption-wrapper
position: relative;
background: black;
.service-message-wrapper .captions
font-family: inherit;
font-style: italic;
font-size: 14px;
color: white;
<body class="esc-layout">
<div class="promo-bar">
<div class="customer-care-wrapper promo-block">
<div class="customer-care" style="padding-top:10px; padding-bottoms:12px;">
" Contact us 24/7: "
</div>
</div>
<div class="service-message-wrapper promo-block" style="height: 28px;">
<div class="service-banner service-message-1" style="margin-top: 0px;">
<div class="caption-wrapper">
<p class="captions">
<span> Same-day delivery to New York </span>
</p>
</div>
</div>
</div>
</div>
</body>【问题讨论】：
【参考方案1】：对于中心 div，使用弹性框非常容易。
div.outer
align-items: center;
background: red none repeat scroll 0 0;
display: flex;
height: 50px;
position: absolute;
right: 0;
top: 0;
width: 50%;
div.inner
background: black none repeat scroll 0 0;
height: 20px;
left: 0;
width: 100%;
<html><head>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
不要忘记将 webkit 用于 safari 和 chrome，在您的情况下，我认为最好为 <p> 设置 margin:0 以获得更好的控制
p.captionsmargin:0;
【讨论】：
【参考方案2】：在绝对元素内部居中，内部元素需要是绝对的，并给出宽度和高度。
.red-box
background-color:red;
width:400px;
height:400px;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
.black-box
background-color:black;
width:200px;
height:200px;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
<div class="red-box">
<div class="black-box"> </div>
</div>
working sample (click run button)
【讨论】：
【参考方案3】：您可以将position: absolute 与top 和transform 结合使用。
诀窍在于，在top: 50% 中，50% 指的是父级高度。在transform 中，50% 指的是元素的自己的高度。
.outer
height: 50px;
width: 50%;
position: absolute;
top: 0;
right: 0;
background: red;
.inner
position: absolute;
left: 0;
/* make the top edge of .inner appear in the vertical center of .outer */
top: 50%;
/* move .inner up by half of its height so that its middle is in the middle of .outer */
transform: translateY(-50%);
height: 20px;
width: 100%;
background: black;
<div class="outer">
<div class="inner"></div>
</div>更多信息：http://howtocenterincss.com/
【讨论】：
以上是关于HTML / CSS如何在绝对DIV中居中DIV [重复]的主要内容，如果未能解决你的问题，请参考以下文章