We Keep Coding

How to make a fixed middle button merging with same gradient as a div with 100% height

I have block with gradient from top(black) to bottom(blue) with 400px width and 100% height fixed at right side of the browser. There is a button as well with 50px width and 100px height at the left and vertically middle of this block. I want same block gradient merging this button as well so it will look attached with this block. Any solution using css or js? example given in screenshot.
thanks in advance

Use background-attachement:fixed and apply the same gradient to the button:
.box {
width:400px;
position:fixed;
top:0;
right:0;
bottom:0;
background:linear-gradient(to bottom,red, blue) fixed;
}
.button {
writing-mode:vertical-lr;
font-size:23px;
position:absolute;
top:30%;
left:-30px;
padding:5px;
color:#fff;
background:linear-gradient(to bottom,red, blue) fixed;
}
<div class="box">
<div class="button">a button</div>
</div>

CSS to position image a percentage of another image

Say I have an image that has width
width: 100vw;
Is it possible to position a title say 50% of the way down from this image? I can't think of how to do it as the height will be changing based on the vw, so can this be done with CSS only, or do I need Javascript? Either way, how would I do this?
Thanks
Edit: I have tried the various suggestions below but it seems that whenever I try to use solely CSS with position:relative it messes up the rest of my code. Is there a javascript function, therefore, that can calculate the height of the image as a % of the page height, and then can I position my title at say 75% of the height of the image?

I'm not entirely sure if I've understood you correctly or not, but if you want to vertically centre a piece of text over the top of a responsive image, you could do this:
div {
position: relative;
}
img {
width: 100vw;
height: auto;
}
p {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
<div>
<img src="https://unsplash.it/200/100/?random">
<p>SOME TEXT</p>
</div>
https://jsfiddle.net/fjh6msqL/

Sure, add a parent around the image and set it to inline-block so that it will match the width of the image, add position: relative so that you can absolutely position your title text in relation to the parent, and then either add an element with your title text or use a pseudo element from the parent (that's what I did in this example) and absolutely position that 50% from the top, and use translateY(-50%) to move the image back up 50% of it's own height so it's in the middle of the image vertically. Here is a good article on how to center stuff using CSS https://www.w3.org/Style/Examples/007/center.en.html
div {
display: inline-block;
position: relative;
}
div:after {
content: 'here is your title';
color: white;
background: black;
position: absolute;
top: 50%;
width: 100%;
text-align: center;
}
img {
width: 100vw;
}
<div class="parent">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</div>

You can't really do that with an image without using some Javascript. The best solution I think would be to use a div element and set it's background-image property to the image you want to display, and then position your title vertically inside the div. Something like this:
<div style="background: url('url-to-image') no-repeat; background-size: cover; background-position: center center;">
<h2 class="title"></h2>
</div>
Vertical positioning can be tricky, but there are ways, for example:
CSS Vertical align middle

With CSS margin:auto , max-height:0 with absolute position actually does the magic. this will center your title text perfectly regardless of screen size. Instead of giving title a width and height we can set top, left, right, bottom property to 0 which actually scale the element to its relative parent's size. Hope this helps.
body{
margin:0;
padding:0;
}
.img-placeholder{
position:relative;
}
.img-placeholder img{
width:100vw;
height:auto;
}
.img-placeholder h2{
position:absolute;
margin:auto;
top:0;
right:0;
bottom:0;
left:0;
max-height:0px;
text-align:center;
}
<div class="img-placeholder">
<img src="http://lorempixel.com/output/sports-q-c-640-480-2.jpg">
<h2>Image Title</h2>
</div>

Scrolling the content of an HTML element, rather than the whole window object

I have the following two in my hands:
#elementA {
position: absolute;
width: 200%;
height: 100%;
background: linear-gradient(to right, rgba(100,0,0,0.3), rgba(0,0,250,0.3));
z-index: 250;
}
#containerofA {
position: fixed;
width: 100%;
height: 100%;
z-index: 240;
padding-bottom: 100px; // to hide the horizontal scrollbar
overflow-x: scroll;
}
The elementA as a div appears inside the containerofA as a div again. elementA has twice the width as its container, and is to be scrolled with a touch-capable device.
These things already happen. What I'm after is to have the elementA to be initially scrolled to middle. I want it to be either positioned at -50% initially, or to be scrolled towards right by 50% upon loading.
In JavaScript, CSS or HTML: How to do that?
window.scroll(offset-x, offset-y); and variations scroll the whole window, if they can. It should really be an easy thing to do, but I cannot see how...

Use scrollLeft property of dom elements.
http://jsfiddle.net/hCN7n/
document.getElementById('containerofA').scrollLeft = 250;

Try something like this:
$(window).load(function() {
$(element).scrollLeft(offset-left);
});

Why not do it like:
.Container{
position:fixed;
width:100%;
height:100%;
overflow-x:scroll;
overflow-y:hidden;
}
.Elementcontained{
position:absolute;
margin:auto;
left:0;right:0;bottom:0;top:0;
width:200%;
height:100%;
}
That should probably work?

You can use the scrollTop and scrollLeft properties.

How to dynicamlly center the center of a div based on screen size

I really thought this would be simple but i'm losing my mind! I just simple want to center a div in the div of the screen. But not that top left of the div to the center of the screen but the center of the div in the center.
Here is my div css
.box
{
padding-top:20px;
padding-left:5px;
background-color: #ffffff;
background-color: rgba(221,221,221,0.5);
border: 1px solid black;
border-radius: 25px;
filter: alpha(opacity=90);
height: 125px;
width: 250px;
z-index: 1;
}
<form id="form1" runat="server">
<div id="box"><div>
</form>
Thanks! I couldnt figure out how to get the html to side in a code block. This is center horizontally and vertically.

Use position:absolute if you need it centred both horizontally and vertically:
#box {
position:absolute;
top:0; left:0; right:0; bottom:0;
margin:auto;
/* etc */
}
http://jsfiddle.net/wcFMw/

To center horizontally:
margin:auto;
To center vertically:
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
You could also use position: fixed to make the div centered even when scrolling the page.
Also note that you'll have to use # instead of . to select by id. . is the CSS selector used for class.
JsFiddle

margin:0 auto;
Add this property to your css class.

center a div (absolute position and width)

i use below css to center my div with absolute position:
#mydiv {
position:absolute;
top: 50%;
left: 50%;
width: 121px;
height: 121px;
margin-top: -60.5px; /*set to a negative number 1/2 of your height*/
margin-left: -60.5px; /*set to a negative number 1/2 of your width*/
}
It works like magic.
But as you can notice, it has fixed width and height.
Now i have to use this same css but for my div which has no fixed width and height, as it uses responsive layouts.
I just want to know is there any simplest way to set my div width dynamically in css by javascript or so? i.e., it count my div width on page load and than set to a negative number 1/2 of your it in margin-left?

You can center a fixed or absolute positioned element setting right and left to 0, and then margin-left & margin-right to auto as if you were centering a static positioned element.
#example {
position: absolute;
/* center the element */
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
/* give it dimensions */
min-height: 10em;
width: 90%;
}
See this example working on this fiddle.

use to
display table-cell
as like this
Css
.parent{
display:table-cell;
width:400px;
text-align:center;
border:solid 1px red;
vertical-align:middle;
height:400px;
}
.child{
display:inline-block;
background:green;
}
HTML
<div class="parent">
<div class="child">i m child div</div>
</div>
Demo

I also had this problem trying to center captions of varying lengths in a slideshow.
To center an absolute positioned element that has a dynamic width you can use transform: translateX. With prefixes this works in most modern browsers. Like so:
div {
width: auto;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%); }

Assign a class to all the divs that you want positioned like that, and then just select all of them and do the calculations.
$("body").find(".center").each(function() {
$(this).css({
"margin-left": "-" + ( $(this).width()/2 ) + "px",
"margin-top": "-" + ( $(this).height()/2 ) + "px"
});
});
Though, beware that this is a bad way of doing things, mainly because it's slow, your containers are not flexible and if you don't wait for the centering you may have flashes of unformatted content.