Vertical align a position fixed div with fluid height - html

I have a div with these properties:
.tourcontainer {
position:fixed;
top:0px;
padding:200px;
z-index:20;
color:white;
}
I have the challenge, that the content of the div is fluid, so i don't know how to make it vertical align regardless of the height of the div.

.div{
position: relative;
top: 50%;
transform: translateY(-50%);
}

Related

CSS v-align absolute div inside relative div that has height determined by img inside

I am trying to make a div ("#conteudo_produtos3_txt") vertically align in the middle of another div ("#conteudo_produtos3") that has height determined by a img that is inside of it.
I've tryed using display:table on the container and display:table-cell; vertical-align:middle in the inside div but it doesn't work.
Can I do this using only CSS?
Heres the HTML:
<div id="conteudo_produtos3">
<img width="100%" src="imagens/conteudo_produtos3.jpg" />
<div id="conteudo_produtos3_txt">
<h1>b. clue</h1>
<p>ideal para perfumar ambientes pequenos.<br>
<br>
alcance:<br>35 m² (100 m³)<br>
<br>
duração do refil:<br>15 a 60 dias;<br>
<br>
alimentação:<br>3 pilhas AA;<br>
<br>
programação:<br>dias x horas x intervalo de aspersão x volume por aspersão.</p>
</div>
</div>
And the CSS:
#conteudo_produtos3{ position:relative; width:100%; display:table; }
#conteudo_produtos3_txt{ position:absolute; left:20%; font-family:moskauLight; text-align:left; display:table-cell; vertical-align:middle; z-index:2; }
Try this:
#conteudo_produtos3_txt {
position: absolute;
top: 50%;
left: 50%;
tex-align:center;
margin-top: -100px;
margin-left: -200px;
}
margin-top and margin-left can be adjusted based on your need.
You could try:
#conteudo_produtos3_txt {
font-family:moskauLight;
left:20%;
position:absolute;
text-align:left;
top: 50%;
transform: translateY(-50%);
z-index:2;
}
You could always use the calc() function on the margin-top property of the inside div. Set it to be 50% minus half of the image height.
For instance, if the height of the image is 300px, you could set the margin-top property to
#conteudo_produtos3_txt {
margin-top: calc(50% - 150px);
}
That should vertically align it within the image.
You should use padding:auto for outer div or margin:auto for child div

CSS: placing a container with defined proportions as huge as possible on the window

I am trying to figure out how to solve the following problem with CSS:
I have a container, say it's a div. It should be always visible on my page, vertically and horizontally centered.
The container should not have a fixed size, but a fixed proportion (or aspect ratio), say: "width = 1/3 of height".
Moreover, the container should be always visible as huge as possible. (Meaning either "touch" the upper and lower OR the left and right borders of the browser window, depending on the current window size)
This is how I proceeded so far:
relevant html:
<body>
<div>Text</div>
</body>
css:
body {
margin: 0px;
}
div {
position: absolute;
background-color: red;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
This of course only centers the div. The cucial part is the sizing, that I described above. Would this be possible with css?
You can set min-height: 100vh so element will always be full height and width: calc(100vh/3); so width is 1/3 of window height
Demo
body {
margin: 0px;
}
div {
position: absolute;
background-color: red;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-height: 100vh;
width: calc(100vh/3);
}
<div>Text</div>
This is a version of the responsive video solution. You'll need to wrap the element you want to keep the ratio for in a container.
#container{
position:relative;
padding-top:33%;
width:100%;
}
#container div{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
}
Padding (and margin) percentages are based on the width of the element. So, if the width is 100%, the height in the above code will be 1/3 of the width (33%).

Layer responsive images on top of each other with Bootstrap

I'm trying to get two images on top of each other, while also being centered both vertically and horizontally on screen. If I make them both positioned relatively, the first one is centered great, while the second one appears beneath the first.
#copy, #logo {
position: relative;
top: 50%;
transform: translateY(-50%);
margin-left: auto;
margin-right: auto;
}
So I added a wrapper and positioned that relatively and positioned the images absolutely. Now they stack on one another, but I lost my centering.
#wrapper {
position: relative;
top: 50%;
transform: tranlasteY(-50%);
margin-left: auto;
margin-right: auto;
}
#copy, #logo {
position: absolute;
}
You got to make html, body, the #wrapper and all the parent elements for the images to occupy all the screen, with height:100%. Set the positioning of the images absolute based on #wrapper with position:relative on it. And voilá, set the XY positioning margin to 50% (as you did) and translate(-50%) (as you did).
body,html{
padding:0;
height:100%;
}
#wrapper {
position: relative;
height:100%;
}
#copy, #logo {
opacity: 1;
position: absolute;
top:50%;
left:50%;
transform:translateY(-50%) translateX(-50%);
}
Pen
Obs: Great images btw
You can omit the wrapper and just use absolute positioning on the children elements, setting the margin to auto and the top/right/bottom/left to 0:
#copy, #logo {
opacity: 1;
position: absolute;
margin:auto;
top:0;
right:0;
bottom:0;
left:0;
}
<div id="wrapper">
<img id="copy" class="img-responsive" src="http://fillmurray.com/600/600"></img>
<img id="logo" class="img-responsive" src="http://fillmurray.com/500/500"></img>
</div>

Using Fixed Positioning on a Vertically Aligned Div

Hoping there's a simple solution to this. Basically what I'm trying to do is place a div (#hello) in the vertical center of the browser and use fixed positioning so it doesn't budge on scroll. Here's my HTML so far:
<section id="home">
<div id="home-container">
<div id="hello"></div>
</div>
</section>
And the CSS:
#home {
display: table;
overflow: hidden;
margin: 0px auto;
}
*:first-child+html #home {
position: relative;
}
* html #home {
position: relative;
}
#home-container {
display: table-cell;
vertical-align: middle;
}
*:first-child+html #home-container {
position: absolute;
top: 50%;
}
* html #home-container {
position: absolute;top:50%;
}
*:first-child+html #hello {
position: relative;
top: -50%;
}
* html #hello {
position: relative;
top: -50%;
}
#home {
height: 100%;
}
Right now the div is vertically centered within the "home" section but moves on scroll. I've tried changing the #home and #home-container to fixed positioning but it doesn't work.
I've searched around quite a bit and apologize if a similar thread already exists. Hope someone can point me in the right direction. Thanks in advance!
The concept for vertically aligning a div to the vertical center with a fixed position would be to add the position:fixed property (specifying the offsets), and then placing a negative margin top of half the div height. Let's say that #hello is 100px tall for example:
#hello {
position:fixed;
top:50%;
margin-top:-50px;
}
With position:fixed; the div will be relative to your document window.
You can add this style. Also you have to add some content in the middle so that you can check properly, or, give some height(in px) to the parent div. An empty parent div with no height will not reflect the change.
#hello{
position: fixed;
top: 50%;
}
You can check this fiddle:
http://jsfiddle.net/76a4j/6/
Replace your css with this one
*{margin:0; padding:0;}
html, body{height:100%;}
#home{display:table; margin:auto; height:100%; width:100%; position:fixed; top:0px; left:0px;}
#home-container{display:table-cell; vertical-align:middle; text-align:center;}
#hello{display:inline-block;}
I made a fiddle for you. Check it out http://jsfiddle.net/fQwFL/
Hope it will fix your problem.

center div with position absolute with just css without knowing the width

I would like to center different images which are shown and hidden, depending on how the user clicks.
What I did to center an image was:
img {
margin-left: auto;
margin-right: auto;
display: block;
}
which worked fine. But it does not work for a position: absolute; Is there a css only way to center a position: absolute div horizontally in the middle of body or parent without knowing the width?
For absolutely positioned element, you can set the margin:auto in combination with left:0 and right:0 (for horizontally centered) or top:0 and bottom:0 (for vertically centered):
img {
position:absolute;
left:0;
right:0;
margin:auto;
}
Demo.
Give the element position: absolute and position it 50% from the left edge of the screen, then use transform: translate to move it 50% of its width to the left.
Demo:
HTML:
<div class="center"></div>
CSS:
.center {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
Here's a pen with this.
Here's the browser support for 2d transforms, and information about which vendor prefixes you need.
You can also use transform: translate3d to center elements vertically with the same logic. The CSS would then look like this:
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
The only way i know is using an additional div, like this:
http://jsfiddle.net/tTAG5/1/
HTML:
<div class="target">
<div class="wrapper"></div>
</div>
CSS:
.wrapper{
width:100px;
height:100px;
background:blue;
margin:0 auto;
margin-left:-50%;
}
.target{
position:absolute;
left:50%;
}
What this does is:
set left:50% on your main div
add your divs contents in another wrapper div element like shown in demo above
set margin-left:-50% on the wrapper div
You can use:
padding-left: 50%;
margin-left: -(half the width of your image)px
It's not the cleanest solution it's probably not the right scenario for absolute positioning.