CSS Centering div on other

我正试图找到将一个div置于另一个div中心的最佳方法，即使用"top"one_answers"left"CSS组件。当调整浏览器窗口的大小时，圆圈应始终位于框的中心，但在缩放时会稍微水平移动

这是我正在使用的代码；https://codepen.io/EarlGrey8/pen/LYVOQrY

body {
background-color: #908787;
}

.banner {
position: fixed;
width: 101%;
margin: -1%;
height: 35%;
background-color: #76568e;
}
.moduleContainer {
position: absolute;
font-family: 'Bellota', cursive;
background-color: #e2e2e2;
top: 25%;
left: 20%;
border-style: solid;
border-radius: 20px;
border-color: #cacaca;
width: 60%;
height: 400px;
}
.moduleInner {
display: inline-block;
position: relative;
top: -130px;
width: 100%;
height: 70%;
}
.moduleImage {
position: relative;
border-radius: 100%;
background-color: #908787;
height: 250px;
width: 250px;
top: -130px;
left: 33%;
}
<body>
<div class="banner"></div>
<div class="moduleContainer">
<div class="moduleImage"></div>
<div class="moduleInner"></div>
</div>
</body>

在任何屏幕上将圆居中。请尝试以下CSS。

.moduleImage {
left: 50%;
transform: translateX(-50%);
}

更改.moduleImage的position、transform属性。

body {
background-color: #908787;
}
.banner {
position: fixed;
width: 101%;
margin: -1%;
height: 35%;
background-color: #76568e;
}
.moduleContainer {
position: absolute;
font-family: 'Bellota', cursive;
background-color: #e2e2e2;
top: 25%;
left: 20%;
border-style: solid;
border-radius: 20px;
border-color: #cacaca;
width: 60%;
height: 400px;
}
.moduleInner {
display: inline-block;
position: relative;
top: -130px;
width: 100%;
height: 70%;
}
.moduleImage {
position: absolute; /* change */
border-radius: 100%;
background-color: #908787;
height: 250px;
width: 250px;
top: -130px;
left: 50%;
transform: translateX(-50%); /* change */
}

<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://fonts.googleapis.com/css?family=Bellota&display=swap" rel="stylesheet">
<link rel="stylesheet" href="simple.css">
</head>
<body>
<div class="banner"></div>
<div class="moduleContainer">
<div class="moduleImage"></div>
<div class="moduleInner"></div>
</div>
</body>
</html>

您可以使用calc css3calc参见示例：

body {
	background-color: #908787;
}
.banner {
	position: fixed;
	width: 101%;
	margin: -1%;
	height: 35%;
	background-color: #76568e;
}
.moduleContainer {
	position: absolute;
	font-family: 'Bellota', cursive;
	background-color: #e2e2e2;
	top: 25%;
	left: 20%;
	border-style: solid;
	border-radius: 20px;
	border-color: #cacaca;
	width: 60%;
	height: 400px;
}
.moduleInner {
	display: inline-block;
	position: relative;
	top: -130px;
	width: 100%;
	height: 70%;
	
}
.moduleImage {
	position: relative;
	border-radius: 100%;
	background-color: #908787;
	height: 250px;
	width: 250px;
	top: -130px;
	left: calc(50% - 125px); /* just this line changed */
}

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link href="https://fonts.googleapis.com/css?family=Bellota&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="simple.css">
</head>
<body>
	<div class="banner"></div>
<div class="moduleContainer">
	<div class="moduleImage"></div>
	<div class="moduleInner"></div>
		
</div>
</body>
</html>

一切都一样。

就在.moduleImage类中，我将左属性更改为left: calc(50% - 125px);

125px是元素宽度的一半。

通过更新您的代码

.moduleContainer {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
font-family: 'Bellota', cursive;
background-color: #e2e2e2;
top: 50%;
left: 20%;
border-style: solid;
border-radius: 20px;
border-color: #cacaca;
width: 60%;
height: 400px;
}
.moduleInner {
display: inline-block;
height: 70%;
}
.moduleImage {
border-radius: 100%;
background-color: #908787;
height: 250px;
width: 250px;
}

我希望这项工作

相关内容

最新更新

热门标签：