how do I center a div

[LTTfanfromSweden]

so on my webpage I have my logo inside a div with a border. i made the div 50% so its smaller just so it looks better but its positioned to the left of the page and I would like the div to be in the center with a 25% 

 

this is my css for the div 

.logo{
			width: 50%;
			border-style: inset;
			border-width: 10px;
			text-align: center; 
		}

 

[Energycore]

~Moved to Programming

[Techicolors]

try margin: 0 auto

[LTTfanfromSweden]

2 minutes ago, Technicolors said:

try margin: 0 auto

thanks, mind expaking what that is/does exactly? 

[Techicolors]

1 minute ago, LTTfanfromSweden said:

thanks, mind expaking what that is/does exactly? 

auto triggers centering, 0 removes all margin 

[tatte]

On 03/02/2018 at 2:36 AM, LTTfanfromSweden said:

thanks, mind expaking what that is/does exactly? 

The first value sets top and bottom margins to 0, this has no effect to the horizontal centering, the latter value sets left and right margins to auto, which achieves the desired centering. For the centering to work the element needs to have a set width. Styles that may remove the element from it's natural position (float, position) can easily break this. I have expanded margin below to further showcase what's happening, all three forms achieve the same outcome:

	margin: 0 auto 0 auto;

/* or */

	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;

Border has a shorthand as well, although different rules apply of course: 

border: 10px inset;

I recommend using a source such as the w3schools to learn about features and work reducing tricks as you go. Using an automated validator can also be very helpful. There's one for HTML as well, but looks like I broke the Link feature.

[nuc]

Both above are half right in their explanation of what auto does in context of margin.

The auto keyword tells the browser "I don't know what size margin I want now, calculate it for me"; because auto is set on the 2 opposing sides the value is split between them - centering the element.

 

You should never use w3schools (not only b/c it's a scam site - do not attempt to buy a "certification") but also b/c information is wrong or out of date. Use MDN: https://developer.mozilla.org/en-US/docs/Web/CSS

 

There is css-grid, or flexbox that also have solutions for centering.