How to align entire html body to the center?
I just stumbled on this old post, and while I’m sure user01 has long since found his answer, I found the current answers don’t quite work. After playing around for a little bit using info provided by the others, I found a solution that worked in IE, Firefox, and Chrome. In CSS:
This is almost identical to abernier’s answer, but I found that including width would break the centering, as would omitting the auto margin. I hope anyone else who stumbles on this thread will find my answer helpful.
Note: Omit html, body < height: 100%; >to only center horizontally.
Good answer. Just wondering (as I don’t have a lot of experience with HTML), is setting the height to 100% necessary?
@JackHumphries The height is only necessary if you want to align the page center on both the vertical and horizontal axis. If horizontal is all you want, you can omit the height.
This is such a simple answer yet the cleanest and most efficient way of centring the body tag in the middle of the page.
While it’s short is also does not work in IE, Edge Legacy, Edge, Chrome, nor Firefox. The problem is that margin auto only works when the element width is less than that of the parent. As ‘body’ defaults to 100% there no room on the edges to auto-insert margins. You can use body < margin:0 auto; max-width: 700px; >and then your body will be up to 700px and will allow wrapping on smaller devices.
As of today with flexbox, you could:
Compared to this other flexbox auto-margins technique:
the first-one, does not require you to wrap everything into a div!
Solutions 1 (flex + justify-content) and 3 only align vertically to the center, content is still aligned to the right. Solution 2 (flex, margin: auto) works but it makes the scrollbar appear as if content was sightly higher than the page allows. Setting min-height to a slightly lower value like 95vh works (but may induce some unwanted offset).
If I have one thing that I love to share with respect to CSS, it’s MY FAVE WAY OF CENTERING THINGS ALONG BOTH AXES.
Advantages of this method:
- Full compatibility with browsers that people actually use
- No tables required
- Highly reusable for centering any other elements inside their parent
- Accomodates parents and children with dynamic (changing) dimensions!
I always do this by using 2 classes: One to specify the parent element, whose content will be centered ( .centered-wrapper ), and the 2nd one to specify which child of the parent is centered ( .centered-content ). This 2nd class is useful in the case where the parent has multiple children, but only 1 needs to be centered). In this case, body will be the .centered-wrapper , and an inner div will be .centered-content .
The idea for centering will now be to make .centered-content an inline-block . This will easily facilitate horizontal centering, through text-align: center; , and also allows for vertical centering as you shall see.
.centered-wrapper < position: relative; text-align: center; >.centered-wrapper:before < content: ""; position: relative; display: inline-block; width: 0; height: 100%; vertical-align: middle; >.centered-content
This gives you 2 really reusable classes for centering any child inside of any parent! Just add the .centered-wrapper and .centered-content classes.
So, what’s up with that :before element? It facilitates vertical-align: middle; and is necessary because vertical alignment isn’t relative to the height of the parent — vertical alignment is relative to the height of the tallest sibling. . Therefore, by ensuring that there is a sibling whose height is the parent’s height (100% height, 0 width to make it invisible), we know that vertical alignment will be with respect to the parent’s height.
One last thing: You need to ensure that your html and body tags are the size of the window so that centering to them is the same as centering to the browser!
How to get body content to center on page using CSS
I have designed a webpage and I am using CSS for positioning. The layout is a Header, Horizontal Menu, and a Content Section (containing 2 columns). The Header, Horizontal Menu and Content section are all the same width. I can get them to line up on the left, however I would like to «center» them on the page. I have created a DIV called ‘full’ to contain all the other DIVs. When I do this I am able to center the Header and Menu by using CSS code: margin: 0 auto; in the Header and Menu IDs however it doesn’t work for the Content ID which stays on the left. I can float the content section left or right and it is off-center on the respective side. If I remove the float option altogether the content section’s background is the same color as the body background. When I use a debugger the Body and #full cover the width of the page but only seem to vertically cover the header and menu I am not sure why. My guess is I need to use a «clear» somewhere but I am not sure where. I tried a ‘clear: both’ function in the #menuBar but it didnt work. Any help would be greatly appreciated.
#content < background-color: #eee; float: left; >body < background-color: silver; >#header < width: 976px; height: 154px; background-image: url('images/header-bg.jpg'); background-repeat: no-repeat; text-align: center; margin: 0 auto; >#header h1 < color: white; text-align: center; padding: 52px; margin: 0 auto; >#menuBar < width: 976px; height: 33px; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 1.2em; font-weight: bold; text-transform: uppercase; color: white; background-color: #2F3C4C; background: 5px solid red; margin: 0 auto; >#menuBar ul < list-style-type: none; float: left; margin: 0 auto; >#menuBar li < float: left; width: 150px; padding: 0 10px; margin: 0 auto; text-align: center; >#menuBar li:hover < color: blue; cursor: auto; >#columnLeft < width: 582px; padding-left: 18px; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; font-size: 0.95em; line-height: 1.2em; float: left; >#columnLeft img < float: left; padding: 5px; >#columnRight < width: 376px; float: left; >#columnRight h2 < margin: 0 auto; padding: 10px; >#columnRight imgCompany Name Inc.
- home
- products
- services
- about us
- contact us
Category 1
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. This is some text talking about our first product. This is just a bunch of random information to fill some space. I bet your are really interested.
Category 2
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Here is another paragraph with some more random infomration that I am sure you are not even reading and do not necessarily care about. Lets see how this works.
Category 3
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. This is some text talking about our third product. This is just a bunch of random information to fill some space. I bet your are really interested.
Category 4
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Here is another paragraph with some more random infomration that I am sure you are not even reading and do not necessarily care about. Lets see how this works.
Pictures
HTML center content in body tag
I’m trying to center the content in my body tag in a simple HTML page. I want the body to be 100% width, i have a container div inside of it with a set width, i want the container to be in the center of the screen. I tried to set the margin to 0 auto ; does not work, tried to set align=»center» in the body tag, doesnt work. Here is my page, as you can see it’s not in center: http://jsbin.com/vifekivatabo/1/ What am i doing wrong?
5 Answers 5
your .container1 margin:0 auto;
Try thhis to your container class:
margin:0 auto;//to center the page
No problem with margin:0 auto; here
Just put
img < max-width: 100%; height: auto; width: auto\9; /* ie8 */ >body < width: 100%; font-family: Arial, Verdana; margin: 0 auto !important; padding: 0; >.container1 < max-width: 600px; width: auto; >.inner < max-width: 60%; width: auto; margin: 0 auto; >.round < border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; margin: 0 auto 0 auto; padding: 5px; border: 2px solid #f4f3ee; background: #ffffff; >.auto-style1 Welcome to the xxx mobility enrollment page.
dasdasd
@* *@ Username: Password:
Country: Country
Code Prefix and Number
(no space, no leading zero)
Mobile:
Platform:
Application Version 1.5
I’ve also created a CodePen and a JsFiddle for you.
how to make the whole page in the center?
The page is here: https://gentle-day-3026.herokuapp.com/ The css file like this: https://gentle-day-3026.herokuapp.com/stylesheets/base.css another is to use reset.css to replace the base.css (the new user just 2 hyperlink allowed) Try to change some many times, include methods like:
Your posted code should work if you want to horizontal-center-align #divMain . If it does not works, there should be something somewhere (maybe in reset.css ) disturbing it.
8 Answers 8
On your current page, body has a fixed width of 720px . Remove this. Next, set the fixed width on your outer-most div that sits just inside the body . Additionally, give this div a margin of 0 auto , which will result in it being centered horizontally.
What you have done is fine. But you given a width to the body . Remove the width attribute from there. Try this CSS and it works:
See base.css line no. 8 has the same width: 720px; for the body! And also, for the change it to and give css as .center . Please try this and let us know.
Finally you should be having this:
It was working from my chrome. Let me post a screenshot! Please make the suggested edits. You had given width in wrong place and margin auto needs to be given there.
I modified the base.css to disable the width and saved, but in firebug, the width values is still existing, disable it in firebug, the whole page is on the center. In fact, I cancel the body’s width setting in the base.css file.Reload the page, the problem is still existing: not center.
You have saved right, lemme check from my side and will let you know what you need to change. See base.css line no. 8 has the same width: 720px; for the body! And also, for the
You need to set your body width to 100%, your to whatever size you want (eg 720px) and its margin to 0 auto.
The sample code that you have posted works perfectly for aligning #divMain to the center (horizontally).
Looking at the code you have posted for your site, it looks like you have defined a fixed width for your body element (see line 12 of base.css ). Removing this fixed width, and then moving the correct width to the wrapper div (currently set using align=»center» ) should solve your problem.
May be it helps you. Try to add this style in your code.