div of width 200px and height 200px center align it

i want to center align a div whose width is 200px and height is 200px. Please tell me how to do it
LVL 2
SunScreenCertAsked:
Who is Participating?
 
ddayx10Connect With a Mentor Commented:
It actually might be better to do this:

div
{
height: 200px;
width: 200px;
background-color: blue;
margin: 25% auto auto auto;
}
0
 
mharfouchCommented:
your div cant be absolutely positioned to start with, so change if it is.

then add to the body of your css
margin-left="auto"
margin-right="auto"

and it should create an ever margin on both sides, centering the div
0
 
SunScreenCertAuthor Commented:
body {background-color: white;
      margin-left: auto;
      margin-right: auto;

      }
div {
     height: 200px;
     width: 200px;
      background-color: blue;
      
      

}
this is my css, it is not working...center align, i mean in the center with margin-top and bottom also auto
0
Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

 
ddayx10Commented:
Without seeing your html layout it makes it kindof hard, but here are a couple choices:

The way you have it in the code above will work if you set width for the body, and no other css is getting in the way.

You could simply add the margin: auto auto to the div, should also work.

Also on the parent of the div in question you could use the text-align:center setting.

good luck,

dday

0
 
jasemhiCommented:
Here is what ddayx10 is talking about (minus the width of the body tag):
body {background-color: white;}
div {height: 200px;width: 200px;background-color: blue;margin-left: auto;  margin-right: auto;}

Open in new window

0
 
SunScreenCertAuthor Commented:
not working it makes it center from left and right but not from top and bottom
0
 
ddayx10Commented:
What solution did you end up with that creates this state of "not working"?

Usually I dont expect to get a top/bottom margin to align automatically. I put the elements inside of a parent container. As the elements fill the container there is automatic placement of "verticle center", and then to make it all look nice Ill add some padding to the container. If the padding is the same on top/bottom then it is "vertically centered".

It would be best if you would show your html/css and outline exactly where the problem is, and what your expectations are for a solution.

dday
0
 
SunScreenCertAuthor Commented:
here is my total code

<html>
  <head>
    <title>Growing and Shrinking Div</title>
      <style type="text/css">
body {background-color: white;
      
      

      }
div {
     height: 200px;
     width: 200px;
      background-color: blue;
margin: auto auto auto auto;
      
      

}
</style>
   
  </head>

  <body>
    <div id="resize">
      </div>
  </body>
</html>
 
0
 
ddayx10Connect With a Mentor Commented:
I hope this helps.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Growing and Shrinking Div</title>
	  <style type="text/css">
	  	body
	  	{
	  		background-color: white;
 
	  	}
	  	div
	  	{
	  		height: 200px;
	  		width: 200px;
	  		background-color: blue;
	  		margin: 25% auto;
	  	}
	  </style>
    
  </head>
 
  <body>
    <div id="resize"></div>
  </body>
</html>

Open in new window

0
 
mharfouchCommented:
put vertical-align:middle;

in your div css
0
 
ddayx10Commented:
pretty sure that will only work with a table.
Tested it here
removed margin: 25% auto auto auto;
added vertical-align:middle;
no joy...
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.