I want to start from center instead of left to right how I can do that?

Question

div {
width: 50px;
height: 50px;
background: green;
position:fixed;
top:150px;
transition:background 1s ease-out;
}
div:hover {
width:250px;
height:250px;
background: red;
}

Answer 1

With a position fixed ( or even absolute or relative ), it's ever mostly difficult: you need nested container for tinkering a thing with different 'position' value to succeed ( in case of fixed sizes: with percentage you'll end crazy :P ).

So, what you need in this case:

- avoid targetting directly a html element ( in your rule, ALL div will becomes 'fixed', same sizes and positions ^^ ), and prefer a root with an unique id ( or a class for targetting a group of element ): #my_div { ... }

- html:

<div id="wrap"><div></div></div>

- css:

#wrap { /* container for horizontal alignement */
width:100%;
height:0; /* height of zero: avoid overlap on wide width */
position:fixed; /* positionnement mode you choose to use */
top:150px; /* you value of shift from top */
background:yellow; /* bg color for see height zero is as not displayed */
text-align:center; /* center inline content */
}
#wrap div { /* as is, query selector get all div in descending child tree: be carefull to nested div if necessary */
display:inline-block; /* display inline-block for be align with text stream */
width: 50px; /* size of your square */
height: 50px;
background:green; /* color */
transition:background 1s ease-out, width 1s ease-out, height 1s ease-out; /* transition and animation can have multiple declaration */
}
#wrap div:active {
width:250px;
height:250px;
background: red;
}

Answer 2

try using nested containers or float..that might help you some or you can check out the w3schools w3css framework..i use that mostly

Answer 3

you need position absolute or relative..

Answer 4

why dont you try the <center> tag thats a html5 taG...better than making the css position and all :p

Answer 5

in the body add text="center" :D

Answer 6

Just insert <center> tags before and after the block you want to be in center.☺