I use this way:
.centr {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
The site is like this:
The problem is picture in picture, it is not in place
One way of centering a <video> element inside a parent div is using a flexbox:
.container {
/* just styling, nothing important */
background-color: gray;
width: 500px;
height: 200px;
/* note these lines below */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
video {
width: 300px;
height: 150px;
background-color: #000;
}
<div class="container">
<video></video>
</div>
To make auto margin work, the center class must have a width:
.center {
margin: 0 auto;
width: 400px;
}
Then, rather than a container, I'd apply the center class to the video itself:
<video class='center'>
</video>
Related
I have created a video background for my website but I am trying to make it cover the entire page.
My HTML:
<header>
<video loop muted autoplay playsinline poster="">
<source src="https://www.gordonmac.com/wp-content/uploads/storm-1.mp4" type="video/mp4">
<source src="http://freshsauce.test/video/FS Website-FINAL-PRORES.mov" type="video/mov">
</video>
<div class="banner">
<div class="banner-text">
Header Text Here
</div>
</div>
</header>
<p>yoooooo</p>
<p>yoooooo</p>
<p>yoooooo</p>
<p>yoooooo</p>
<p>yoooooo</p>
<p>yoooooo</p>
My CSS:
body{
margin:0;
}
header {
position: relative;
height: 100vh;
min-height: 100%;
width: 100%;
background-size: cover !important;
-webkit-background-size: cover !important;
text-align: center;
overflow: hidden;
z-index:-99;
}
video {
position: absolute;
top: 50%;
left: 50%;
z-index: -100;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
As you can see the <p>yoooooo</p> have a white background. The codepen is https://codepen.io/mrsalami/pen/wjmgze
Use css rule position:fixed; instead of position:absolute; for video tag
video {
position: fixed;
top: 50%;
left: 50%;
z-index: -100;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
I had a play with your CSS and added a few things. I normally remove all margin/padding from all elements at the top of my CSS file.
I then changed your video position from relative to absolute, meaning that nothing will affect it.
I also removed the !important tags. I would recommend trying to avoid these at all costs, unless absolutely necessary. Even then, avoid them at all costs.
* {
padding: 0px;
margin: 0;
}
body{
margin:0;
}
header {
position: absolute;
height: 100vh;
min-height: 100%;
width: 100%;
background-size: cover;
-webkit-background-size: cover;
text-align: center;
overflow: hidden;
z-index:-99;
}
video {
position: absolute;
top: 50%;
left: 50%;
z-index: -100;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
header:before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
header .banner {
display: inline-block;
vertical-align: center;
margin: 0 auto;
width: 85%;
padding-bottom: 30px;
text-align: center;
font:24px 'opensans-bold', sans-serif;
font-weight: bold;
}
header .banner-text {
color: #f5f5f5;
width: 100%;
}
You can do some thing like this. give position:fixed to video. it cover and set top, right, bottom, left to 0
https://codepen.io/arpanpatel/pen/rvdjGR
video {
position: fixed;
top: 0;
left: 0;
right:0;
bottom:0;
z-index: -100;
width: 100%;
}
I am trying to get my video to play in the background of my website but for some reason, it gets on top of all of the other content on the site. I don't know whats going on.
CSS
.fullscreen {
position:static;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow:hidden;
z-index: -100;
}
.fullscreen-vd {
position:absolute;
top: 50%;
left: 50%;
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#media (max-width: 0px) {
.fullscreen {
background: url('gif.mp4') center center / cover no-repeat;
}
.fullscreen-vd {
display: none;
}
}
HTML
<div class="fullscreen">
<video loop autoplay muted poster="IMG_25062017_221924_0.png" class="fullscreen-vd">
<source src="gif.mp4" type="video/mp4">
</video>
</div>
Try this update some css part and remove some part to get it, And you haven't any width and height to video, so i used 100% height and width for video.
If you used a fixed height and width for video then use fullscreen-vd class to align center vertically and horizontally to your video.
I posted a working snippet, Hope it will help you.
As your requirement fiddle link
body,
html {
width: 100%; /* For take full height and width */
height: 100%;
}
.fullscreen {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
width: 100%;
height: 100%;
}
/* NO NEED BECAUSE YOUR VIDEO IS OCCUPY FULL HEIGHT AND WIDTH */
/* .fullscreen-vd {
position:absolute;
top: 50%;
left: 50%;
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
} */
.content {
color: #fff;
text-align: center;
}
#media (max-width: 0px) {
.fullscreen {
background: url('gif.mp4') center center / cover no-repeat;
}
.fullscreen-vd {
display: none;
}
}
<div class="fullscreen">
<video width="100%" loop autoplay muted poster="IMG_25062017_221924_0.png" >
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/mp4">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/webm">
</video>
</div>
<div class="content">
<h1>
HELLO
</h1>
</div>
I'm trying to center a heading both vertically and horizontally inside a div that is rotated 45deg (transform:rotate(45deg);).
Because the div is rotated - I rotate the heading the opposite direction (transform:rotate(-45deg);) and then apply regular centering techniques which doesn't work. What is the solution for this?
#wrap {
position: relative;
transform: rotate(45deg);
top: 150px;
background-color: blue;
height: 300px;
width: 300px;
margin:0 auto;
}
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform: rotate(-45deg);
}
<html>
<body>
<div id="wrap"><h1>some centered text</h1></div>
</body>
</html>
In your h1 element you defined this style
h1 {
...
transform: translate(-50%, -50%);
transform: rotate(-45deg);
}
you're overriding the first transform property with the rotate() and doing so you're losing the centering effect obtained by the negative translate(): you should chain instead the two transformation like so
h1 {
position: absolute;
top: 50%;
left: 50%;
margin: 0;
transform: translate(-50%, -50%) rotate(-45deg);
}
You should also remove the default margin applied on the h1 element (edit the demo and see what happens without margin: 0;)
Example: http://codepen.io/anon/pen/jWjxeW?editors=1100
You should write one transform function right after another
I made a small change in your css, also added text-align: center;
transform: rotate(-45deg) translate(0, -100%);
#wrap {
position: relative;
transform: rotate(45deg);
top: 150px;
background-color: blue;
height: 300px;
width: 300px;
margin:0 auto;
}
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: rotate(-45deg) translate(0, -100%);
text-align: center;
}
<html>
<body>
<div id="wrap"><h1>some centered text</h1></div>
</body>
</html>
use this transform: translate(-50%, -50%) rotate(-45deg);
#wrap {
position: relative;
transform: rotate(45deg);
top: 150px;
background-color: blue;
height: 300px;
width: 300px;
margin:0 auto;
}
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
}
<html>
<body>
<div id="wrap"><h1>some centered text</h1></div>
</body>
</html>
You can achieve this by encapsulating your h1 in another div
#wrap {
position: relative;
transform: rotate(45deg);
top: 150px;
background-color: blue;
height: 300px;
width: 300px;
margin: 0 auto;
}
#text {
position: absolute;
height: 300px;
width: 300px;
transform: translate(-50%, -50%);
transform: rotate(-45deg);
background-color: red;
}
h1 {
text-align: center;
line-height: 300px;
margin: 0; /* H1 has default margin, read more: https://www.w3.org/TR/html-markup/h1.html *
}
<html>
<body>
<div id="wrap">
<div id="text">
<h1>some centered text</h1>
</div>
</div>
</body>
</html>
If you're happy to fix the height/width of your h1 elements, something like this will do it:
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: rotate(-45deg);
height: 120px;
line-height: 40px;
width: 150px;
margin-top: -60px;
text-align: center;
margin-left: -75px;
}
I want to put the div.father at the center of the screen,and to put the div.son at the center of the div.father.
Here is what i wanted.
How to rewrite my css code to get the result?
<!DOCTYPE html>
<html>
<head>
<meta content="text/html" charset="utf-8">
<title> boxes</title>
<style type="text/css">
div.father{margin: 0 auto;width:300px;height:300px;border:1px solid black;}
div.son{margin: 0 auto;width:100px;height:100px;border:1px solid black;}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
You can use flexbox. Add to parent div display: flex and justify-content: center(for horizontal align) with align-items: center(for vertical align):
div.father {
margin: 0 auto;
width: 300px;
height: 300px;
border: 1px solid black;
display: flex;/*add this*/
justify-content: center;/*add this for horizontal align*/
align-items: center;/*add this for vertical*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
div.son {
margin: 0 auto;
width: 100px;
height: 100px;
border: 1px solid black;
}
<div class="father">
<div class="son"></div>
</div>
Edit: For horizontal and vertical align in the middle of the screen you can use the trick described to this article Centering Percentage Width/Height Elements.
References
flex
Following css will make center both div.
display:flex and position:absolute will do the trick.
align-items: center; will center child div vertically and justify-content: center; will horizontally inside parent.
div.father {
align-items: center;
border: 1px solid black;
display: flex;
height: 300px;
justify-content: center;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 300px;
}
div.son {
border: 1px solid black;
height: 100px;
width: 100px;
}
<div class="father">
<div class="son"></div>
</div>
Working Fiddle
You could do this:
div.father {
margin: 0 auto;
width:300px;
height:300px;
border:1px solid black;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
div.son {
margin: 0 auto;
width:100px;
height:100px;
border:1px solid black;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="father">
<div class="son"></div>
</div>
position: absolute will be place son and father out of flow. With top and left you will place item to the offset you want from the first parent with a position absolute/relative/fixed or <body> and transform: translate(-50% -50%) will re-center element not from top-left corner but center.
NOTE: you could use the -moz-, -o-, -webkit- and -ms- prefix before transform for old version browser.
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
You could also use flex to reach the same goal but if you want support all IE familly, use a polyfil for flex.
Try this one......
html,body{
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
display: flex;
align-items: center;
}
.parent{
border:1px solid;
width: 400px;
height: 400px;
margin: 0 auto;
display: flex;
align-items: center;
}
.child{
border:1px solid;
width: 200px;
height: 200px;
margin: 0 auto;
}
<div class="parent">
<div class="child"></div>
</div>
Add this property in div.father class
div.father{position:relative;}
Add this property in div.son class
div.son{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height:100px;
width:100px;
margin: auto;
}
This will work cross browser
If this is my html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Google</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<nav id="you">
Gmail
Apps
You
Sign In
</nav>
<form>
<img src="static/Google-logo-520x245.jpg" width="250" height="125" alt="Google Logo">
<br>
<input type="text" name="search">
<button id="left" name="Google">Google Search</button>
<button id="right" name="Feeling">Feeling Lucky</button>
</form>
</body>
</html>
Then why doesn't the justify-content: space-around option put space between my 2 buttons instead they overlay.
I am trying to keep the image, input field and buttons all aligned to the center vertically and each on their own row horizontally.
my css
#you {
position: fixed;
right: 5px;
height: 40px;
top: 0;
padding-top: 15px;
}
#you a {
text-decoration: none;
margin-right: 6px;
}
input {
width: 400px;
/*display: block; */
position: fixed;
top: 100%;
left: 50%;
border: 1px solid #999;
height: 25px;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}
form {
position: fixed;
top: 45%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
/*https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/ */
}
button {
position: absolute;
top: 135%;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
}
i rewrote your css.
form{
text-align: center;
margin-top: 100px;
}
img{
display: block;
width: 250px;
margin: 0 auto 20px auto;
}
input{
margin-bottom: 20px;
}
Please take notice of the centering techniques i have used:
text-align: center - Highly effective for inline displayed elements.
fixed width + margin: 0 auto - Effective when you have a block element.
You should add display:flex property to the parent, and justify-content: space-around; property too for getting space around its children.
form {
position: fixed;
top: 45%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
/*https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/ */
display:flex;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
}
button {
position: absolute;
top: 135%;
}
Hope helps!
By wrapping your elements with a div.wrapper and by removing the fixed position from your elements it should work.
Have a look at this updated fiddle:
http://jsfiddle.net/nj0mgwdr/4/
The .wrapper div css
.wrapper{
margin: 0 auto;
width: 300px;
text-align: center;
}