Question

我正在尝试在页面中间放置div（这将隐藏，只会在某些特定情况下显示，但这不是我现在想要实现的目标）。

我尝试修复它并将margin: 0 auto放在页面中间，但我无法得到它。我认为它必须与position: relative的{{1}}和position: absolute一起引用，div分别包含big image div和div但我不能改变他们的价值因为我制作了一个旋转木马（这里我没有展示它，因为它会扩展很多代码），需要使用这些参数。

以下是我的代码：JSFiddle，您可以在其中看到它现在给我的效果。我无法理解。

如何将红色div放在中间？

提前致谢！

Answer 1

以下是您的问题的快速解决方法：

#middleDiv {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    width: 200px;
    height: 200px;
    margin: auto;
    background-color: red;
    top: 0;
    z-index: 100;
}

Your Fiddle updated

body{
	text-align: center;
	margin: 0px;
	padding: 0px;
}

#leftDiv{
	float: left;
	width: 50%;
	position: relative;
	background-color: green;
	z-index: 0;
}

#galery{
	float: right;
	width: 50%;
	background-color: blue;
}

#centerGalery{
	width: 100%;
	margin: 0 auto;
	max-width: 75%;
}

.divImage{
	display: inline-block;
}

.divImageBig{
	width: 100%;
	position: absolute;
}

.imageBig{
	width: 100%;
	height: 100%;
}

.imageGalery{
	width: 100px;
	height: 100px;
}

#middleDiv {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    width: 200px;
    height: 200px;
    margin: auto;
    background-color: red;
    top: 0;
    z-index: 100;
}

<body>
		<div>
			<h1> GALERY OF IMAGES</h1>
		</div>
		
		<div id = "middleDiv">
			This is a prove.
		</div>
		
		
		<div id = "leftDiv">
			<div class = "divImageBig"><img class = "imageBig" src = "http://marcus.ridoutfamily.co.uk/wp-content/uploads/2013/08/78186357b7074a1a3bda5d3c0ed4a2e0.jpg"></div>
		</div>
		
		<div id = "galery">
			<div id = "centerGalery">
				<div class = "divImage"><img class = "imageGalery" src = "http://marcus.ridoutfamily.co.uk/wp-content/uploads/2013/08/78186357b7074a1a3bda5d3c0ed4a2e0.jpg"></div>
				<div class = "divImage"><img class = "imageGalery" src = "http://marcus.ridoutfamily.co.uk/wp-content/uploads/2013/08/78186357b7074a1a3bda5d3c0ed4a2e0.jpg"></div>
				<div class = "divImage"><img class = "imageGalery" src = "http://marcus.ridoutfamily.co.uk/wp-content/uploads/2013/08/78186357b7074a1a3bda5d3c0ed4a2e0.jpg"></div>
				<div class = "divImage"><img class = "imageGalery" src = "http://marcus.ridoutfamily.co.uk/wp-content/uploads/2013/08/78186357b7074a1a3bda5d3c0ed4a2e0.jpg"></div>
				<div class = "divImage"><img class = "imageGalery" src = "http://marcus.ridoutfamily.co.uk/wp-content/uploads/2013/08/78186357b7074a1a3bda5d3c0ed4a2e0.jpg"></div>
				<div class = "divImage"><img class = "imageGalery" src = "http://marcus.ridoutfamily.co.uk/wp-content/uploads/2013/08/78186357b7074a1a3bda5d3c0ed4a2e0.jpg"></div>
				<div class = "divImage"><img class = "imageGalery" src = "http://marcus.ridoutfamily.co.uk/wp-content/uploads/2013/08/78186357b7074a1a3bda5d3c0ed4a2e0.jpg"></div>
				<div class = "divImage"><img class = "imageGalery" src = "http://marcus.ridoutfamily.co.uk/wp-content/uploads/2013/08/78186357b7074a1a3bda5d3c0ed4a2e0.jpg"></div>	
			</div>
		</div>
    </body>
</html>

Answer 2

试试这个https://jsfiddle.net/nygppLen/4/

CSS

#middleDiv {
    background-color: red;
    height: 200px;
    left: 50%;
    margin: 0 auto;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    z-index: 100;
}

Answer 3

要把它放在父母的中间，你可以使用：

{{1}}

Answer 4

这是jsfiddle。

#middleDiv{
    position: fixed;
    width: 200px;
    height: 200px;
    left:50%;
    margin-left:-100px;
    background-color: red;
    z-index: 100;
}

我已经middleDiv一个left:50%;和margin-left:-100px（div的宽度的一半）。

如果我有多个div，怎么能在页面中间加一个div？

4 个答案: