How to correctly center website

StackOverflow https://stackoverflow.com/questions/23393942

  •  12-07-2023
  •  | 
  •  

Pergunta

im looking for center my website in the middle of the browser. This is my website:

http://marcosballester1.hol.es/test/test2.html

Left side is correctly centered, but right side no. Code:

<style>
#wrapper {
    width: 50%;
    margin: 0 auto;
}
</style>
<div id="wrapper">
<body>
   HOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLAHOLA</body>
</div>
Foi útil?

Solução

Both your original and the first answer are working as expected. See this JSFiddle

I added a background-color property to show you hide wide your div is. The div is centered on the page, but the text is overflowing outside of the box, because it is one continuous word and your browser doesn't want to break up a single continuous word. If you had multiple words in that box such as hello hello hello ... that wouldn't be an issue, because they would automatically wrap.

If you want to force your text to wrap you can use the word-wrap: break-word property, as shown in this example.

Outras dicas

You have a error you must put body before a div

.wrapper {
    width: 900px;
    margin: auto; //to center div
}

<div class="wrapper">
Hello
</div>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top