Question

我正在尝试将div置于图像中心。我不确定这里有什么问题。我目前也对定位和对齐感到困惑，我可能也需要对它进行处理。感谢您提前输入的内容。

.template-banner{
	width: 100%;
	height: auto;
	margin: 0;
}
.template-banner-wrpr{
	width: 100%;
	height: 500px;
}

.template-banner-img {
	content: url("../img/template-banner.jpg");
	width: 100%;
	height: 500px;
}
.tbanner-reg-wrpr1{
	width: 100%;
	height: 500px;
}
.tbanner-reg-wrpr{
	width: 100%;
	position: absolute;
	top: 50%;
	right: -50%;
    margin: 0 auto;
    height: 500px;
}
.tbanner-reg-desc-wrpr{
	width: 680px;
	float: left;
	height: 285px;
}

.tbanner-reg-input{
	width: 270px;
	float: left;
	background-color: rgb(247,247,247);
	border-radius: 5px;
	padding: 10px 25px 25px 25px;
	height: 250px;
}
.tbanner-reg-input p{
	font-size: 20px;
	font-weight: bold;
}

.tbanner-loginb{
	background-color: #ff3b30;
	border: solid #ff3b30 1px ;
	border-color: #ff3b30;
	color: white;
	font-weight: bold;
}

.tbanner-regemail, .tbanner-regpsw, .tbanner-regpnumber, .tbanner-loginb {
	width: 100%;
	padding: 10px;
	margin: 5px 0px 10px 0px;
	border-radius: 5px;
	border-width: 1px;
	border-style: line;
	border-color: rgb(249,249,249);
}


.template-features {
	width: 100%;
	height: auto;
	text-align: center;
	background-color: rgb(246,244,245);
}

<div class="template-banner">
	<div class="template-banner-wrpr1"><img class="template-banner-img"></div>
	<div class="tbanner-reg-wrpr">
		
			<div class="tbanner-reg-desc-wrpr">
			<h3 p id="tbanner-reg-desc-title">Heading Division 1</h3>
			<p id="tbanner-reg-desc-info">Text hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText here</p>
			</div>
			<div class="tbanner-reg-input"><p>Registration/Image</p>
			<input type="text" placeholder="Your work email" name="wemail" class="tbanner-regemail">
			<input type="password" placeholder="Your Password" name="psw" class="tbanner-regpsw">
			<input type="text" placeholder="090-1234-5678" name="pnumber" class="tbanner-regpnumber">
			<input type="submit" name="gstarted" value="Signup" class="tbanner-loginb">
			</div>
	</div>
</div>

Expected Result

Answer 1

从顶部和左侧50％处的绝对定位使用50％的容器来定位孩子。从顶部和左侧翻译元素-50％的变换将使用50％的元素自身维度，并获得居中元素。

使用内联块，网格，弹性框或需要最少css的简单浮动，可以轻松实现两列布局。

.container {
  background-image: url(http://farm5.staticflickr.com/4615/24977545657_f984bbaec2_b.jpg);
  height: 400px;
  border: 5px solid black;
  position: relative;
}

.content-wrapper {
  min-height: 100px;
  height: 100px;
  max-width: 80%;
  width: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  border: 5px solid red;
}

.content-wrapper div {
  width: 50%;
  height: 100%;
  box-sizing: border-box;
  float: left;
  background: #fff;
}

.left-column {
border: 5px solid orange;
}
.right-column {
border: 5px solid cyan;
}

<div class="container">
  <div class="content-wrapper">
    <div class="left-column"></div>
    <div class="right-column"></div>
  </div>
</div>

Answer 2

这是解决问题的代码

我更改了top left和tbanner-reg-wrpr transform: translate(-50%, -50%); 并添加.template-banner

并且position需要将relative更改为.template-banner{ width: 100%; height: auto; margin: 0; position: relative; } .template-banner-wrpr{ width: 100%; height: 500px; } .template-banner-img { content: url("http://lorempixel.com/g/400/200/"); width: 100%; height: 500px; } .tbanner-reg-wrpr1{ width: 100%; height: 500px; } .tbanner-reg-wrpr{ position: absolute; top: 50%; left: 50%; margin: 0 auto; transform: translate(-50%, -50%); background: #0000006b; } .tbanner-reg-desc-wrpr{ width: 200px; float: left; height: 285px; } .tbanner-reg-input{ width: 270px; float: left; background-color: rgb(247,247,247); border-radius: 5px; padding: 10px 25px 25px 25px; height: 250px; } .tbanner-reg-input p{ font-size: 20px; font-weight: bold; } .tbanner-loginb{ background-color: #ff3b30; border: solid #ff3b30 1px ; border-color: #ff3b30; color: white; font-weight: bold; } .tbanner-regemail, .tbanner-regpsw, .tbanner-regpnumber, .tbanner-loginb { width: 100%; padding: 10px; margin: 5px 0px 10px 0px; border-radius: 5px; border-width: 1px; border-style: line; border-color: rgb(249,249,249); } .template-features { width: 100%; height: auto; text-align: center; background-color: rgb(246,244,245); }

<div class="template-banner">
	<div class="template-banner-wrpr1"><img class="template-banner-img"></div>
	<div class="tbanner-reg-wrpr">
		
			<div class="tbanner-reg-desc-wrpr">
			<h3 p id="tbanner-reg-desc-title">Heading Division 1</h3>
			<p id="tbanner-reg-desc-info">Text hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText here</p>
			</div>
			<div class="tbanner-reg-input"><p>Registration/Image</p>
			<input type="text" placeholder="Your work email" name="wemail" class="tbanner-regemail">
			<input type="password" placeholder="Your Password" name="psw" class="tbanner-regpsw">
			<input type="text" placeholder="090-1234-5678" name="pnumber" class="tbanner-regpnumber">
			<input type="submit" name="gstarted" value="Signup" class="tbanner-loginb">
			</div>
	</div>
</div>

df %>%
    group_by(ID) %>%
    mutate(numdays = as.numeric(max(Date) - min(Date)) + 1,
        pctmissing = (numdays - n()) / numdays)

Answer 3

这是我的FIDDLE

.wrapper{border:1px solid red;width:100%;height:200px;display:flex;justify-content:center}
.content{width:200px;border:1px solid red;margin:20px;display:block;display:flex;justify-content:center}
.left{border:1px solid green;width:40%;display:inline-block}
.right{border:1px solid yellow;width:40%;display:inline-block}

和css

{{1}}

我使用弹性盒，

将绝对div在图像上垂直和水平居中

3 个答案: