CODEWITHSUNDEEP
htmlcss
Francisco Romero
Francisco Romero

Reputation: 13199

How can I put a div in the middle of the page if I have more than one div?

I am trying to put a div on the middle of my page (that will be hidden and only be shown in some specific cases, but it is not what I want to achieve right now).

I tried fixing it and putting a margin: 0 auto to put it on the middle of the page but I cannot get it. I think it has to be reference with the position: relative and position: absolute of the div in which it is contained the big image div and for that div respectively but I cannot change their values because I made a carousel (here I do not show it because it would extend very much the code) that needs to be with that parameters.

Here is my code: JSFiddle in which you can see the efect that it gives to me right now. I cannot get it out.

How can I put my red div on the middle?

Thanks in advance!

Upvotes: 1

Views: 61

Answers (4)

Ehsan Razm khah
Ehsan Razm khah

Reputation: 197

To put it on middle of it parent , you can use:

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

Upvotes: 1

Darren Gourley
Darren Gourley

Reputation: 1808

Here's a jsfiddle.

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

I've given the middleDiv a left:50%; and margin-left:-100px (half the width of the div).

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122087

Try this 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;
}

Upvotes: 1

sodawillow
sodawillow

Reputation: 13176

Here is a quick fix for your problem :

#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>

Upvotes: 2

Related Questions