How to correctly center website

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

  •  12-07-2023
  •  | 
  •  

题

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>
有帮助吗？

解决方案

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.

其他提示

You have a error you must put body before a div

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

<div class="wrapper">
Hello
</div>
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top