I know vertical alignment is tricky and there are plenty of questions about it on stackoverflow... I have been trying to figure this out for a few hours, with no success, so decided to ask it (apologies if it is a duplicate)
I have created a login page for my website.
There are 2 main divs in the body, one for logo and one for login content. The login content, has 2 sections, one for email and password and one for social media login.
<body>
<div>
My Logo goes here
<div>
<div>
<section id="loginForm"></section>
<section id="SocialLoginForm"></section>
</div>
</body>
Is there a way to always vertically center the login div? I want the logo to stay on the top, but the login div be vertically centered. I know I can assign a height to the div and center it's content, but I don't know how to determine the height as the screen size will change...
this is how it looks like, as you see there is a big gap at the bottom.
You can try flex like this :
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
height: 100vh;
text-align:center;
}
.logo {
border: 1px solid red;
min-height: 30px;
}
.login {
flex: 1;
border: 1px solid red;
display: flex;
flex-wrap: wrap;
align-content: center;
}
#loginForm,
#SocialLoginForm {
min-height: 45px;
border: 1px solid green;
flex: 0 0 100%;
}
<div class="container">
<div class="logo">
My Logo goes here
</div>
<div class="login">
<section id="loginForm">Login content</section>
<section id="SocialLoginForm"> social login content</section>
</div>
</div>
You have a few display options:
display:table (ie8 and above)
html,
body {
height: 100%;
width: 100%;
}
body {
display: table;
margin: 0;
}
body>div {
display: table-row;
}
body>div+div {
display: table-cell;
height: 100%;
vertical-align: middle;
text-align:center;
}
<div>
My Logo goes here
</div>
<div>
<section id="loginForm">lg form</section>
<section id="SocialLoginForm">socl form</section>
</div>
display:flex;
body {
margin: 0;
height: 100vh;
display: flex;
flex-direction: column;
}
div+div {
margin: auto;
}
<div>
My Logo goes here
</div>
<div>
<section id="loginForm">lg form</section>
<section id="SocialLoginForm">socl form</section>
</div>
display:grid;
body {
height: 100vh;
margin:0;
display: grid;
grid-template-rows: auto 1fr;
}
div+div {
margin: auto;
}
<div>
My Logo goes here
</div>
<div>
<section id="loginForm">lg form</section>
<section id="SocialLoginForm">socl form</section>
</div>
All display method require a container with an height set.
there can be also method with transform, absolute, inline-block but no need to use tricks nowdays ;)
body, html{
display:table;
height:100%;
width:100%;
}
.my-container{
display:table-cell;
vertical-align:middle;
}
.my-container .your-div{
width:150px;
height:150px;
border:1px solid #e3e3e3;
margin:0 auto;
}
<html>
<body>
<div class="my-container">
<div class="your-div">
<div>My Logo goes here<div>
<div>
<section id="loginForm">loginForm</section>
<section id="SocialLoginForm">SocialLoginForm</section>
</div>
</div>
</div>
</body>
</html>
If you dont mind using preprocessor such as Sass. I would recommend using a mixin like that:
#mixin center($axis: "both") {
position: absolute;
#if $axis == "y" {
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
top: 50%;
transform: translateY(-50%);
}
#if $axis == "x" {
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
left: 50%;
transform: translateX(-50%);
}
#if $axis == "both" {
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
body {
position: relative;
.inner-div {
#include center(); //both horizontaly and vertically pass 'x' or 'y' to center veritcally or horizontal
}
}
Related
I know there are many ways to vertically center a div inside another div, but what I'm experiencing problems on is a way to vertically center a div inside an image element.
Here's the minimum code I require:
HTML:
<img class="star" src="star.png"></img>
<div class="vCenter">Text to be vertically centered in the image.</div>
CSS:
.star {
position: absolute; /* I need this value for another thing in my project */
}
Also, the height of the image is in percentage.
Wrap the image in another element
Move the position: absolute to the wrapper element
Center the text in the wrapper element, let the image expand the wrapper element
.wrapper {
position: absolute;
top: 30px;
left: 10px;
display: flex;
justify-contents: center;
align-items: center;
}
.wrapper img {
/* debug */
background: yellow;
width: 300px;
height: 300px;
}
.wrapper .vCenter {
position: absolute;
left:50%;
max-width: 100%;
transform: translateX(-50%);
}
<div class="wrapper">
<img class="star" src="star.png" />
<div class="vCenter">Text to be vertically centered in the image.</div>
</div>
Try this way:
<div class="container">
<img class="star" src="star.png"></img>
<div class="centered-div">Text to be vertically centered in the image.</div>
</div>
.container {
position: relative;
}
.star {
display: block;
margin: auto;
width: 100%;
}
.centered-div {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
code solution:https://stackblitz.com/edit/web-platform-5qivc2?file=index.html
referred link:https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_text
<div class="container">
<img src="https://via.placeholder.com/250" alt="Snow" style="width:100%;">
<div class="centered">Centered</div>
</div>
.container {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 20px;
color: red;
}
You may add your image and text to a container set to position:absolute
This should do the job ;-)
.container {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
// just add the desired position to this container
}
.star {
position: absolute;
}
.vCenter {
z-index: 1;
}
<div class="container">
<img class="star" src="star.png" />
<div class="vCenter">Text to be vertically centered in the image.</div>
</div>
I am trying to have a horizontal scrolling page and want the scroll to be 75% of my viewport and vertically aligned. But for some reason the div doesn't get aligned vertically. I tried doing margin left, right, top and bottom but resulted in my code acting unexpectedly. Even I tried using "display flex" but didn't work at all.
<div class="main_background">
<div class="wrapper">
<div class="slide one"></div>
<div class="slide two"></div>
<div class="slide three"></div>
<div class="slide four"></div>
</div>
</div>
and my CSS file...
.slide{
width: 100vw;
height: 80vh;
}
.wrapper{
display: flex;
flex-direction: row;
width: 300vw;
transform: rotate(90deg) translateY(-100vh);
transform-origin:top left;
margin-top: 90px;
}
.one{
background-color: orchid;
}
.two{
background-color: orangered;
}
.three{
background-color: pink;
}
.four{
background-color: green;
}
.main_background{
width: 100vh;
height: 100vw;
background-image: linear-gradient(green, greenyellow);
transform: rotate(-90deg) translateX(-100vh);
transform-origin:top left;
overflow-y: scroll;
overflow-x: hidden;
position: absolute;
}
It would be greatly helpful if someone can help me with this! Thanks
Try this out. I gave the .wrapper container a height of 100vh and aligned the flexbox along both axes.
.slide {
width: 100vw;
height: 80vh;
}
.wrapper {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
width: 300vw;
transform: rotate(90deg) translateY(-100vh);
transform-origin:top left;
margin-top: 90px;
}
.one {
background-color: orchid;
}
.two {
background-color: orangered;
}
.three {
background-color: pink;
}
.four {
background-color: green;
}
.main_background {
width: 100vh;
height: 100vw;
background-image: linear-gradient(green, greenyellow);
transform: rotate(-90deg) translateX(-100vh);
transform-origin:top left;
overflow-y: scroll;
overflow-x: hidden;
position: absolute;
}
<div class="main_background">
<div class="wrapper">
<div class="slide one"></div>
<div class="slide two"></div>
<div class="slide three"></div>
<div class="slide four"></div>
</div>
</div>
At the moment, they aren't equal:
<div class="homescreen-content" scroll="false">
<h2>Top</h2>
ITEM 1
<hr>
<h2>Bottom</h2>
ITEM 2
</div>
I want to split the screen equally, and want it to be responsive and centred.
Is there a way to do it with SplitPane?
.homescreen-content {
height: 100%;
display: flex;
}
.split {
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.test1 {
left:0;
height: 55%;
width: 100%;
background-color: $white-love;
border-bottom: 2px solid;
}
.test2 {
left:0;
top: 55%;
height: 50%;
width: 100%;
background-color: $white-love;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
This is may work:
<div class="homescreen-content" scroll="false">
<div class="split test1">
<div class="centered">
<h2>TEST1</h2>
</div>
</div>
<hr>
<div class="split test2">
<div class="centered">
<h2>TEST</h2>
</div>
</div>
</div>
You can do it with the Flexbox:
body, hr {margin: 0}
.homescreen-content {
display: flex; /* displays flex-items (children) inline */
flex-direction: column; /* stacks them vertically */
height: 100vh; /* 100% of the viewport height */
}
.homescreen-content > div {
display: flex;
justify-content: center; /* horizontally centered */
align-items: center; /* vertically centered */
flex: 1; /* each stretches and takes equal height of the parent (50vh) */
}
<div class="homescreen-content" scroll="false">
<div>ITEM 1</div>
<hr>
<div>ITEM 2</div>
</div>
Try this html and CSS
body , html {
height: 100%;
}
.container {
height: 100%;
}
.upper {
border-bottom: 2px solid;
height: 50%;
}
.lower {
height: 50%;
}
<div class="container">
<div class="upper">
<h2>Top</h2>
ITEM 1
</div>
<div class="lower">
<h2>Bottom</h2>
ITEM 2
</div>
</div>
How can I center the text (p) vertically and horizontally inside a div (.item)?
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.wrapper {
width: auto;
height: 10em;
background-color: red;
position: relative;
}
.item {
width: 4em;
height: 4em;
background-color: black;
position: absolute;
display: inline-block;
color: white;
}
.item p {
text-align: center;
vertical-align: middle;
}
#top-right {
right: 0em;
}
#center {
top: calc(50% - 2em);
right: calc(50% - 2em);
}
#bottom-left {
bottom: 0em;
left: 0em;
}
#bottom-right {
right: 0em;
bottom: 0em;
}
</style>
</head>
<body>
<header></header>
<main>
<div class="wrapper">
<div class="item" id="top-left"><p>Top Left</p></div>
<div class="item" id="top-right"><p>Top Right</p></div>
<div class="item" id="center"><p>Center</p></div>
<div class="item" id="bottom-left"><p>Bottom Left</p></div>
<div class="item" id="bottom-right"><p>Bottom Right</p></div>
</div>
</main>
<footer></footer>
</body>
</html>
It's ok to use calc (because I read that this function isn't supported in some browers)? Or there is another way to center the element #center in the div without calc()?
In your structure display:table and display:table-cell would not work because you have used position absolute in .item.
Use below css in #center which is supported in all broswers.
#center {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
//top: calc(50% - 2em);
//right: calc(50% - 2em);
}
example : https://jsfiddle.net/vzk5arxe/2/
Another method.
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Reference: http://colintoh.com/blog/display-table-anti-hero
You can achieve that by using display: flex. I have added below properties to your .item
display: flex;
align-items: center;
justify-content: center;
text-align: center;
Updated code snippet:
.wrapper {
width: auto;
height: 10em;
background-color: red;
position: relative;
}
.item {
width: 4em;
height: 4em;
background-color: black;
position: absolute;
color: white;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
#top-right {
right: 0em;
}
#center {
top: calc(50% - 2em);
right: calc(50% - 2em);
}
#bottom-left {
bottom: 0em;
left: 0em;
}
#bottom-right {
right: 0em;
bottom: 0em;
}
<header></header>
<main>
<div class="wrapper">
<div class="item" id="top-left">
<p>Top Left</p>
</div>
<div class="item" id="top-right">
<p>Top Right</p>
</div>
<div class="item" id="center">
<p>Center</p>
</div>
<div class="item" id="bottom-left">
<p>Bottom Left</p>
</div>
<div class="item" id="bottom-right">
<p>Bottom Right</p>
</div>
</div>
</main>
<footer></footer>
You can center a text inside a parent div using the grid layout which is widely supported now.
.parent-div {
display: grid;
place-items: center;
text-align: center;
}
I hope I helped!
I'm working on a small site and I can't seem to figure out how to center my name vertically. I put my CSS in the HTML file, just so you can see everything I'm doing. Thanks in advance!
<head>
<title>Test</title>
<style>
section {
height: 100vh;
}
.test1 {
background: grey;
}
.name {
border: 3px solid white;
color: white;
padding: 25px 0;
width: 35%;
}
</style>
</head>
<body>
<section class="test1">
<div class="container">
<div class="row">
<h1 class="text-center name center-block">Dylan Bailey</h1>
</div>
</div>
</section>
</body>
This should be all you need if you only have one element on the page. You'll have to remove the default margin that's set by the h1 tag also.
body {
background: grey;
width: 100%;
height: 100%;
}
h1.name {
border: 3px solid white;
color: white;
padding: 25px;
margin: 0;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<h1 class="name">Dylan Bailey</h1>
Use property height and line-height the value of both should be same and this will align the data in the center :)
Just use the grid that comes with bootstrap. No CSS needed.
<body>
<section class="test1">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<h1 class="text-center name">Dylan Bailey</h1>
</div>
</div>
</div>
</section>
</body>
https://jsfiddle.net/DTcHh/14701/