This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How can I vertically center text in a dynamically high div?
How to vertically center div with dynamic height and 100% width in browser window?
<div class="login-signup-page">
<div class="login-signup"></div>
</div>
where login-signup has 100% width and dynamic height
Short answer: You can't.
Long answer: If you know the height, you can use fixed positioning, a top:50% and a margin-top equal to negative half the height. Short of that, you can use some basic JS to calculate what the margin-top should be based on the offsetHeight. If you are vertically centering in another element, rather than the window, you can do the same but with an absolute position provided the container is not static-positioned.
Kolink is indeed correct, but it doesn't take much work. All it takes is some clever CSS and JavaScript (I used jQuery in my example below) to make it work.
<div class="login-signup-page">
<div class="login-signup">Sample Text</div>
</div>
.login-signup-page {
position:absolute;
left:0;
top:0;
height:100%;
width:100%;
background:grey;
}
.login-signup {
width:100%;
background:white;
position:absolute;
top:50%;
}
$(document).ready(function() {
$('.login-signup').css('margin-top', -$('.login-signup').outerHeight() + 'px');
});
Demo
See the jsFiddle example or go straight to the code below:
HTML
<div class="login-signup-page">
<div class="login-signup"></div>
</div>
CSS
.login-signup-page {
/* Position at top of page */
position:fixed;
top:0;
/* Position halfway down page (in supporting browsers) */
-moz-transform:translate(0, 50%);
-webkit-transform:translate(0, 50%);
-ms-transform:translate(0, 50%);
-o-transform:translate(0, 50%);
transform:translate(0, 50%);
/* Prevent hidden content */
height:100%;
width:100%;
}
.login-signup {
/* Prevent hidden content */
max-height:100%;
max-width:100%;
overflow:auto;
/* Position in center of page (in supporting browsers) */
-moz-transform:translate(0, -50%);
-webkit-transform:translate(0, -50%);
-ms-transform:translate(0, -50%);
-o-transform:translate(0, -50%);
transform:translate(0, -50%);
}
Note: In browsers that don't support translate(), the content will appear at the top of the page (instead of being cut off, had top:50%; been used instead).
You'll need Javascript or jQuery to get the height of the element and the browser window, then calculate based on those numbers. Something like this:
$(document).ready(function() {
var signupHeight = $('.login-signup').height(); // height of your dynamic element
var winHeight = $(window).height(); // height of the browser window
$('.login-signup').css('margin-top',(winHeight - signupHeight) / 2); // subtract one height from the other, then divide by 2 so the top and bottom margins are equal
});
Related
I'm doing a website and I trying to center a text but I don't know what the top is not working. It works if I use something like this:
up:25px;
But this doesn't work when I want to use this:
up:50%;
Can you help me? This is my code:
.absolute{
position:absolute;
}
.relative{
position:relative;
}
.white{
background-color:white;
}
#menu-title{
width:300px;
z-index:5;
top:50%;
left:calc(50% - 150px);
top:calc(50% - 2.5em);
}
<div class='relative' id='menu'>
<div class='absolute white' id='menu-title'>
<h2 >Menu</h2>
</div>
</div>
Considering you want to center the <h2> in the <div> with id of 'menu-title', you have several ways to do that.
If you want to use the top property you first have to define the position to fixed, like this:
#menu-title {
position: fixed;
top: 50%;
}
The other way to do that is to use margins:
#menu-title {
margin-top: 100px;
}
You can always change the px.
You should use position:fixed
and also depends on the size of the text you can move it to exactly in the center with transform
#menu-title{
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
hope that helps
Make position:fixed
.absolute{
position:fixed;
}
.relative{
position:relative;
}
.white{
background-color:white;
}
#menu-title{
width:300px;
z-index:5;
top:50%;
left:calc(50% - 150px);
top:calc(50% - 2.5em);
}
<div class='relative' id='menu'>
<div class='absolute white' id='menu-title'>
<h2 >Menu</h2>
</div>
</div>
First of all... it IS working, only not as you expected it. The CSS top:calc(50% - 2.5em), is relative to the first POSITIONED ancestor element. In your case this is the relative (parent) element with id="menu". The height of this element is 0. Therefore it works as it should, but apperently not as you expected.
You might have expected that the menu had a certain height. It does not, because its only child (the menu-title div) is positioned absolute. Absolute positioned elements do not grow their parents.
More likely is that you expected that the title would position relative to the viewport height, instead of relative to its parent.
There are three ways to position the menu-title relative to the viewport height:
Solution 1. Remove relative positioning from the parent
This will make the parents position static (not positioned) and the first positioned ancestor element becomes the viewport. The viewport has a 100% height by nature. Therefore this solution works. A working example of this solution can be found here: http://codepen.io/anon/pen/bBLZva
Solution 2. Give the parent 100% height
When removing the relative positioning from the ancestor(s) is not an option, you can give the parent an 100% height. This, however, is not a straight forward task. Simply adding the CSS height: 100% to the parent is not enough. The height of the menu div is relative to the height of its parent element and not to the height of the viewport. Therefore you need to set their parents explicitly to 100% (viewport height). This can be achieved by adding: body,html {height: 100%;} to the CSS. A working example of this solution can be found here: http://codepen.io/anon/pen/XNZGOv
Solution 3. Use position fixed
Know that position: fixed is fundamentally different than position: absolute AND has compatability issues on older iOS and Android versions (stock browser). However it MIGHT result in the expected behaviour. This can be explained by the fact that 'position: fixed' implies positioning relative to the viewport (and not to the parent). You should use position fixed on the title itsself. A working example of this solution can be found here: http://codepen.io/anon/pen/PbQgpB
Very simple concept:
div-1 has a width of 90% and a height of 1000px,
div-2 has a width of 20% (of div-1) with no height.
Can I centre div-2 both horizontally and vertically within div-1 using CSS?
Sure it is. Use position:relative; on the outer container, position:absolute on the inner, and a few more styles (listed below)
.outer {
width:90%;
height:1000px;
position:relative;
}
.inner {
height:2px; /* To make it visible */
width:20%;
position:absolute;
left:40%;
top:50%;
transform:translateY(-50%); /* Optional; positions it perfectly in center.
Alternatives include using negative margins
or javascript to compensate.Needs some prefixes*/
}
Demo
I'm not sure why you'd want an element to have a height of 0...
As the title implies, I need to know how to center a div that has the following CSS rules applied to it:
display: table;
position: absolute;
The div should be right in the middle of the viewport, and, as per usual with display: table;, it should be the size of it's contents.
HTML
<div class="center"></div>
If the table has a fixed height and width of 400px then you can use this css:
.center {
display:table;
position:absolute;
height:400px;
width:400px;
background:red;
left:50%;
margin-left:-200px; <---- half of width
top:50%;
margin-top:-200px; <---- half of height
}
DEMO WITH CSS
If the table has a dynamic height and/or dynamic width then you can use this jquery:
$('.center').css({
'left': $(window).width() / 2 - $('.center').width() / 2,
'top': $(window).height() / 2 - $('.center').height() / 2
});
DEMO WITH JS
I have an image I'd like to show in a browser such that:
If the image is smaller than the browser viewport, the image is centered
horizotally and vertically.
If the image is larger than the viewport, the image is scaled down to fill
as much of the viewport as possible without adjusting the aspect ratio of the
image. Again, the image is centered horizotally and vertically.
I do not want to use JavaScript; what's the best/most semantic HTML and CSS to do this?
Update I've been asked for clarification regarding semantics: the image is content; the only content within the HTML.
Solution
#GionaF ideas got me to a happy (and very simple) solution:
HTML
<!DOCTYPE html>
<head>
<title></title>
<LINK href="test2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<img src="photo.jpg" alt="photo" />
</div>
</body>
CSS
img {
max-width:100%;
max-height:100%;
position:absolute;
top:0; left:0; right:0; bottom:0;
margin:auto;
}
You can achieve it in many ways, but i can't be "semantic" without knowing the context (is the image the main/only content of the page? is it in the middle of a blog post?), so i'll go for a div.
1. position:absolute; + margin:auto;
Support: crossbrowser
HTML
<html>
<body>
<div id="container">
<img src="your-image.jpg">
</div>
</body>
</html>
CSS
html,body,#container {
height:100%;
}
#container {
width:100%;
position:relative;
}
#container > img {
width:100%;
max-width:400px; /* real image width */
position:absolute;
top:0; left:0; right:0; bottom:0;
margin:auto;
}
Demo
2. display:table; + display:table-cell; + vertical-align:middle;
Support: IE8+, all other browsers - with IE7 fallback (Source 1) (2) (3)
HTML
<html>
<body>
<div id="container">
<span> /* it's important that you use a span here
not a div, or the IE7 fallback won't work */
<img src="your-image.jpg">
</span>
</div>
</body>
</html>
CSS
html,body,#container {
height:100%;
}
#container {
width:100%;
display:table;
*display:block; /* IE7 */
}
#container > span {
display:table-cell;
*display:inline-block; /* IE7 */
vertical-align:middle;
text-align:center;
}
#container > span > img {
width:100%;
max-width:400px; /* real image width */
}
Demo
3. background-size:contain;
Support: IE9+, all other browsers - with vendor prefixes (Source 1) (2)
HTML
<html>
<body>
<div id="container"></div>
</body>
</html>
CSS
html,body,#container {
height:100%;
}
#container {
margin:0 auto;
max-width:400px; /* real image width */
background:url(your-image.jpg) 50% 50% no-repeat;
background-size:contain;
}
Demo
Be careful for how IE8 renders height:auto;, may not keep the ratio.
Edit: i just realized that you wrote "without adjusting the aspect ratio of the image". If you really don't want to keep the ratio, it's easier ... but do you really mean that?
You won't be able to accomplish this unless you have a set height for the container that houses the image. In order for the viewport to know where to have the image centered, it will need know the full height you are working with, as opposed to staying the same size as the image. Height will only expand if it is told to, or if there is actual content filling it up.
To center horizontally you will need to set a container around the image and give it a margin of '0, auto'. Set the image width to be 100% within the container (this will keep the proportions correct as the height will scale appropriately with it), and give the container a percentage based width as well.
You will need to give your image or surround div a set width and height for margin: auto to center the image. See how the code below works for you.
Css
#container {
width: 1000px;
height: 1000px;
}
#img {
background-color:#000;
width: 100px;
height: 100px;
margin: 0 auto;
}
HTML
<div id="container">
<div id="img">
</div>
Edit
Set image as background?
Then set the body to 100%.
body
{
background-image: url('background.jpg');
background-repeat: no-repeat; /* you know... don't repeat... */
background-position: center center; /*center the background */
background-attachment: fixed; /*don't scroll with content */
}
I wasn't able to find a perfect solution (from what I've read it's not possible to do what you want using only CSS and HTML). But I've found a solution closer to what you need. I repeat, it's not perfect. So here it goes (you actually put your image as a background for a div):
#mydiv {
width: 100%;
height: 100%;
position: relative;
background-image: url(photo.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: auto 98%, cover;
}
So, the key here is the background-size property. What it does here: force the image to scale (up or down) to a specified percentage of the width/height of the div/container (the width and height of the div is dictated by the viewport). For images bigger than viewport, this solution is good, but the problem is with smaller images (which are scaled up). Unfortunely, the current implementation of CSS doesn't permit to specify a max-height or max-width for the background-image. If you want to read more on this subject open this webpage: http://www.css3.info/preview/background-size/.
Anyway, a JavaScript solution is better. Hope it helps.
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 8 years ago.
Here's my situation: I'm trying to make a page with two DIVsfilling whole page (height 100%, width 50% each). Also, the content in the DIVs is to be vertically aligned to middle.
Is there an easy way to achieve this without hacks or javascript?
I've tried body,html{height:100%;} .mydiv {display:table-cell;height:100%;vertical-align-middle}
but that doesn't work...and with that code, i have to specify width in pixels instead of percentage
Live Demo
I just made a jsFiddle showing my suggestion to a solution. Here I take into account that you want two <div>s filling 50% of the width each, 100% height, and that you want the content to be vertically aligned in the middle. Here is the simplified working solution with source code.
HTML
<div id="outer">
<div id="table-container">
<div id="table-cell">
This content is vertically centered.
</div>
</div>
</div>
CSS
#outer {
position:absolute;
top:0;
left:0;
width:50%;
height:100%;
}
#table-container {
height:100%;
width:100%;
display:table;
}
#table-cell {
vertical-align:middle;
height:100%;
display:table-cell;
border:1px solid #000;
}
For reference, I used this tutorial.
position: absolute;
top: 0;
bottom: 0;
Will give you a box that fills to 100% height. Make sure your HTML and BODY tags are large enough:
html, body {
height: 100%;
}
Do you want this type of design ? => Example Fiddle