Question

我正在尝试创建一个页面，其中页面中间有一个div水平居中，而不是垂直居中，其中有3个div，它们垂直和水平居中，间距相等。为了实现这一点，我认为最好创建另一个没有背景颜色的div，然后使用margin：auto对它，这个div在主div中居中，但是我不能让其他3个div居中那就像边缘没有考虑父元素一样？

我尝试了一些方法，说它们应该集中我的元素，但它们对我不起作用，所以我认为如果有人可以向我解释如何在CSS中实现这种效果，那将是最好的。

以下是当前情况的屏幕截图（红色div在最终设计中将不可见，颜色可以帮助我）：http://i.imgur.com/cHWfVx6.png

HTML代码：

<html>

<head>
<title>Title Placeholder</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"></link>
</head>

<body>
	
	<div id="title"></div>

	<div id="introdiv"></div>

	<div id="wrapper">
		
		<div id="container">
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
		</div>
	</div>

</body>


</html>

CSS代码：

html {
	background: ##6f7604;
	background-image: url("zenbg-1.png"), url("zenbg-2.png");
	background-repeat: repeat-x, repeat;
}


#title {

	background-color: rgba(83,188,255,0.6);
	min-height: 5%;
	width: 90%;
	margin: auto;
	border: 1px solid #ddd;

}


#introdiv {

	background-color: rgba(255,207,76,0.9);
	min-height: 15%;
	width: 70%;
	margin: auto;
	margin-top: 2.5%;
	border: 1px solid #ddd;

}


#wrapper {

	background-color: rgba(83,188,255,0.6);
	min-height: 65%;
	width: 80%;
	margin: auto;
	margin-top: 2.5%;
	border: 1px solid #ddd;

}

#container {

	min-height: 10%;
	width: 50%;
	background-color: red;
	margin: auto;
	margin-top: 6.5%;
}

.box {

	background-color: rgba(255,207,76,0.9);
	min-height: 40%;
	width: 20%;
	margin-left: 5%;
	margin-top: 5%;
	border: 1px solid #ddd;
	display: inline-block;
}

感谢您的帮助，如果您需要更多信息，请询问。

Answer 1

您可以使用absolute位置和transform来对齐元素middle和center。例如：

.main {
  width: 100%;
  height: 256px;
  padding: 20px;
  background: #000;
}

.center-h {
  width: 80%;
  height: 200px;
  margin: 0 auto;
  position: relative;
  background: #555;
}

.center-vh {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #999;
  padding: 10px;
}

.box {
  display: inline-block;
  width: 64px;
  height: 64px;
  margin-right: 10px;
  background: #ccc;
  float: left;
}
.box:last-child {
  margin-right: 0;
}

<div class="main">
  <div class="center-h">
    <div class="center-vh">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
  </div>
</div>

Answer 2

像这样使用vertical-align：middle

.box {

    background-color: rgba(255,207,76,0.9);
    min-height: 40%;
    width: 20%;
    margin-left: 5%;
    vertical-align: middle;
    border: 1px solid #ddd;
    display: inline-block;
}

CSS定位，垂直和放大水平居中DIV？

2 个答案: