This question already has answers here:
Best way to center a <div> on a page vertically and horizontally? [duplicate]
(30 answers)
Closed 8 years ago.
I have a pop up which contains an ASP.NET form, click the link "Request Information" and the form appears.
However, the pages that have the link "Request Information" to trigger the pop up have a lot of content therefore scrolling is required to see the link.
I need to have the div always centered if a user scrolls to read the content, otherwise if they don't scroll the pop up still appears centered on screen.
The div is positioned absolutely, the whole page width is 960px with margin set to 0 auto.
If the div has an fixed width and height use:
(if width=120px and height=80px)
position: fixed;
top: 50%;
left: 50%;
margin-left: -60px; /* negative half of the width */
margin-top: -40px; /* negative half of the height */
If your popup div has a fixed size then you can use this CSS:
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto; /* this requires a fixed size */
Otherwise you have to fiddle around with display: table-cell; and the like.
Is this what you're trying to do? http://jsfiddle.net/Hrwf8/
The key here is to set the left and top styles to 50% and set the margin-left and top to the negative amount of half of the width and height of the div. This of course requires that you have a fixed size for your div.
Use a position:fixed; for this, use 0 for top, left, right and bottom, and give the div a display:table-cell; also, like this, setting text-align:center; and vertical-align:middle; will make everything inside appear exactly in the middle, without pixel-exact hacks like negative margins.
In your CSS:
.ClassCenter {
position: absolute;
left: 50%;
top: 50%;
}
Source:
http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/demo.html
Related
I'm trying to horizontally and vertically center a header on top of an image. So far I've got the vertical centering down (which is the reason for the relative and absolute positioning). However, the horizontal centering is giving me problems now: margin:0 auto; doesn't work, left:50%; doesn't work and text-align:center doesn't work. Does anyone know how to horizontally center the header on top of the image?
Details:
I don't know the height or width of any of the elements, so I can't use fixed heights or widths
Setting the image as a background is not an option because the image is part of the content
Not all headers will be a similar length, so I have to find a dynamic solution (they will all be one line though, I'll cut them off with an ellipsis)
HTML
<article>
<h2>Title</h2>
<img src="http://bit.ly/gUKbAE" />
</article>
CSS
article {
position: relative;
}
h2 {
line-height: 0;
position: absolute;
top: 50%;
left: 0;
margin: 0;
padding: 0;
}
It's here: http://jsfiddle.net/kmjRu/21/
You can set the article to display: inline-block and width: auto, then center the h2:
http://jsfiddle.net/kmjRu/28/
I am trying to create a lead generation page. I want to center all the contents on the page to the center when displayed on any browser size.
i tried using vertical align center. But it seems not to work.
Which are the best practices to do so ?
http://play.mink7.com/h/mspre/
If you just mean centering between left and right edges, you create an element with a fixed width, and declare margin: auto; on it.
If you want to center the element both horizontally and vertically, you position it halfway across the page both horizontally and vertically, then pull it back by half of the element's width and height.
For example:
.someElement {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin: -100px 0 0 -100px;
}
For me the best way to do it is to make a container div of set width. I normally choose about 900px as pretty much all displays are wider than this now a days. I then centre div by using margin auto.
#container { width: 900px;
margin: 0px auto 0px auto;
}
This will centre the div. Bob's your uncle.
If you want I can post examples of this.
Mike
Here you go:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
I am trying to create a bottom aligned, fluid width sticky footer that contains three links that are the same height as the container, which also have fluid widths.
I have created a top aligned version of this footer, where the links are not the full height of their container. It breaks if I set the bottom of the container to zero. I have put the code for this here:
http://jsfiddle.net/bHJR3/1/
How can I modify what I have so the bottom edge of the container is flush with the bottom of the window, and the links are the same height as the container?
I know how to do this through jquery but I am trying to avoid js if at all possible.
Thanks for any help.
EDIT:
Here's a jquery solution I came up with in case of no answers if anybody wants to see it. http://jsfiddle.net/bHJR3/2/
The reason it broke when you set bottom: 0 on #footer is because everything inside #footer had position: absolute. Absolutely positioned elements do not take up any space in the document flow and will not cause their parent elements to expand to contain them. Setting a height on #footer solves this. Setting height: 100% on the a tags will cause them to size relative to their parent element. You can keep div.content, but you would also have to set height: 100% on it.
Add the following CSS to #footer:
bottom: 0;
height: 90px;
Add the following CSS to A:
height: 100%;
line-height: 90px; /* matches the height from #footer to vertically center the link text */
Remove div.content. It doesn't seem necessary here.
Edit
You can center the footer by adding/changing the following CSS on #footer:
width: 640px;
left: 50%; /* positions left edge of #footer to center of page */
margin-left: -320px; /* pulls footer to the left (width / 2) * -1 */
Edit
You can use max-width and a media query to alter the styling of the footer if the window width is < 640px:
#footer {
position: fixed;
width: 100%;
max-width: 640px;
height: 114px;
bottom:0;
left: 50%;
margin-left: -320px;
}
#media only screen and (max-width: 640px) {
#footer {
margin-left: auto;
left: 0;
}
}
I have a form I would like to center directly in the middle of a page. I have this CSS
#form {
width: 240px;
height: 100px
margin: 0 auto;
display: block;
}
this only does it horizontally. Is there a way to do it vertically?
I might be wrong but if I remember correctly.. this should work:
#form {
width: 240px;
height: 100px
position: absolute; /* make sure this is wrapped by an element with "position: relative" */
top: 50%;
left: 50%;
margin: -50px 0 0 -120px; /* half of the height and width */
}
If I'm wrong, then you probably have to use javascript.
Not really - you can declare an offset from the top of the page, but think about it for a moment...how tall is a webpage? What does it mean to be centered vertically?
Do you want to be centered relative to the open browser window height? Or centered relative to the height of the page (top of header to bottom of footer, regardless of browser window size).
On preview, the comments on the original post cover this well.
How can I align a DIV to the center of my page while its position is absolute? If possible without using javascript.
UPDATE: This is an old answer and the answer currently just below this gives a nicer solution which works even if your div has dynamic width. Another alternative, using margin: auto, can be found here, on a different, but related, question.
You can do this if you know the width of the DIV you want to centre.
CSS:
div
{
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 300px;
margin-top: -150px;
margin-left: -200px;
}
You position the top left corner in the centre, and then use negative margins which are half of the width to centre it.
position: absolute;
left: 50%;
transform: translateX(-50%);
Try this:
position: absolute;
width: 600px;
left: 50%
margin-left: -300px;
It's not possible to get HTML to automatically center anything that is absolutely positioned. Heck, HTML barely centers anything horizontally using CSS margins :-)
As the name implies absolute positioning is absolute where you get top and left fixed positions and any margins are applied relative to those positions. Auto is ignored with absolute positioning.
There are solutions using JavaScript and jQuery. Here's one that I wrote and use a lot:
jQuery .centerInClient() plugin
Hope this helps.
The meaning of position: absolute is exactly that you want to specify how far from the margins of the page your div should be placed. Since you do not know the width of the screen a priori, there is no way to center it.
I guess you just want to remove the div from the page flow, while keeping it centered. In this case it may be enough to add a container div, like
<div id="external">
<div id="internal">
</div>
</div>
and the CSS
#external {
position: absolute
}
#internal {
margin: 0 auto
}
I did not test the above layout, but I think it should work.
Here's a simple method using percentages:
div {
width: 80%;
position: absolute;
left: 10%;
}
Simply set your desired page width, and set the left margin as half of the remainder. In this case, the width is 80%, leaving 20%. Set left:to 10% and it will center the div on the page.
Using this method will allow the div to scale with different window sizes and screen resolutions as well.