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
Related
There are 2 div's horizontally each of width 100%. 1st div height is static i.e. 120px now I want that my second div automatically cover's entire height of my screen. Currently I'm using javascript / jQuery for it but I want to do it with pure CSS.
By entire height I mean remaining area of screen after what 1st div covers.
Simply use flex and you don't have to worry about the fixed size element. By specifying 100vh to body you fill the whole screen and by adding flex:1 to the last div it will cover all the remaining area left by the first one.
body{
margin:0;
padding:0;
height:100vh; /* or simply use height:100% with body and html */
display:flex;
flex-direction:column;
}
.area1{
height:120px;
background:pink;
}
.area2{
flex:1;
background:lightblue;
}
<div class="area1">abc</div>
<div class="area2">123</div>
Using css calc example. The screen height is 100vh (i.e. when the body's padding and margin are both 0) If you know the height of the first div, then the second div's height can be calculated as calc(100vh - {height of other div}px)
body{
margin:0;
padding:0;
}
.area1{
height:120px;
background:pink;
}
.area2{
height:calc(100vh - 120px);
background:lightblue;
}
<div class="area1">abc</div>
<div class="area2">123</div>
I have a website, let's take http://www.example.com. In my html I have
<div style="height:100vh;"><iframe src="http://www.example.com" style="position: relative; width: 100%; height: 100%; border:0;"></iframe></div>
Here the div has the height of 100vh but I want to get the height of example.com and automatically apply it to the div. Can I do that?
Here is a working JSFIDDLE https://jsfiddle.net/jsz9ur1g/1/
HTML
Alot of times the html doesn't expand to the full bodys height, So i added a div
called getHeight right before the body tag and gave it a position of absolute. This will ensure that it expands to 100% of the document height
<div id="getHeight">
</div>
<div id="yourElement">
</div>
CSS
As you can see i gave the HTML a min height and set the getHeight div to position absolute and gave it a height of 100%.
html{
min-height:500px;
}
#getHeight{
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
}
#yourElement{
background:red;
color:#fff;
font-size:20px;
}
JS
var bodyHeight = document.querySelector("#getHeight").offsetHeight;
//or use clientHeight if you don't car about scrollbars and borders
var yourElement = document.getElementById("yourElement");
yourElement.style.height = bodyHeight + "px";
yourElement.innerHTML = "see the height of the actual document is " + bodyHeight + "px";
I had faced problem in right content center of page.
my HTML page is 2 column page left column is Fixed (height 100% and width 350px ) and right side content width is 575px so i want to right side content center in all screen for example screen width is 1600px so its take right side content center in 1250px (1600px-350px.
Thank you advanced
http://jsfiddle.net/md3Dp/5/
http://caniuse.com/#feat=calc
calc() is a native CSS way to do math. We can now set a dynamic width to the content column.
Desktop support for calc() is fairly ok. Added a fall back when calc() is not supported. Based on the max-width of 1600px of the parent added % width fall back.
html,body {
margin:0;
padding:0;
height:100%;
}
.left {
width:21.875%;/* fall back */
width:-moz-calc(350px);
width:-webkit-calc(350px);
width:calc(350px);
float:left;
background:red;
}
.main {
width:100%;
max-width:1600px;
margin:auto;
min-height:100%;
position:relative;
overflow:hidden;
}
.content {
width:78.125%;/* fall back */
width:-moz-calc(100% - 350px);
width:-webkit-calc(100% - 350px);
width:calc(100% - 350px);
float:left;
background:green;
}
You can use a relative parent.
Have a container for right content, absolutely position it and apply left equal to the fixed width of the left div, and apply right:0 to extend it to the remaining width.
Then simply make use of the old (hence having more browser support) margin:0 auto to position the content in center of right container div...
<div id='wrap'>
<div id='left'>one</div>
<div id='right'>
<div id='content'></div>
</div>
</div>
css
html, body {
height:100%;
}
#wrap {
position:relative;
height:100%;
}
#left {
display:inline-block;
width:150px; // in your case 350
height:100%;
border:1px solid;
}
#right {
position:absolute;
top:0;
left:150px; // width of left content
right:0px;
height:100%;
}
#content {
width:575px;
height:100%;
margin:0 auto;
border:1px solid;
}
JSFiddle
use jquery to calculate the width on the basis of screen resolution and then apply the width dynamically if you put the code here i can tell you the jquery code to how to apply the dynamically.
calculate the width on the basis of resolution you can get from this function in javascript:
window.innerWidth
Remove the float: left property from right_content div and add the text-align: center on the parent div i.e right one div.
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...
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
});