This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 3 months ago.
I'm trying to position the green box in the center of the page but totally unsuccessfully.
I set the body as flex..this should allow me to align the inside container to the center but it doesn't work. Why?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sign Up</title>
<link rel="stylesheet" href="signup.css">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="https://kit.fontawesome.com/5ab317586b.js" crossorigin="anonymous"></script>
</head>
<body class="body">
<div class="container">
<div class="box-1">
<h2>Box1</h2>
<p>This is the box 1</p>
</div>
<div class="box-2">
<h2>Box2</h2>
<p>This is the box 2</p>
</div>
<div class="box-3">
<h2>Box3</h2>
<p>This is the box 3</p>
</div>
</div>
<script src="js/bootstrap.bundle.js"></script>
</body>
</html>
CSS
.body{
background-color: black;
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
}
.container div {
border: solid red;
padding: 0;
}
.container{
background-color: green;
display: flex;
justify-content: space-around;
}
I want the green box in the middle, what I'm doing wrong?
thanks
you need to assign height in vh and add justify-content: center; to your body css. the following body css will align it to center
.body{
background-color: black;
display: flex;
width: 100%;
height: 100vh;
flex-direction: column;
justify-content: center;
align-items: center;
}
As Anis has mentioned the body need to be assigned a height so there will be space for the centering to work.
This version uses min-height so the page will be able to scale as more content being added later.
body{
background-color: black;
display: flex;
min-height: 100vh;
flex-direction: column;
justify-content: center;
align-items: center;
}
Related
I'm trying to center a text in the middle of my screen. For some reason it doesn't work. Can someone please take a look at the following index.html and explain to me what I am doing wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.header {
display: flex;
background-color: black;
padding: 2rem;
}
.outer-container {
display: flex;
flex-direction: column;
justify-content: center;
height: 100vh;
}
.inner-container {
display: flex;
flex-direction: column;
align-items: center;
cursor: default;
justify-content: center;
}
span {
padding: .5rem;
}
</style>
</head>
<body>
<div class="parent-container">
<div class="header">Header</div>
<div class="outer-container">
<div class="inner-container">
<h1>HEADING</h1>
<span>Some text here.</span>
</div>
</div>
</div>
</body>
</html>
I was thinking that the flex-layout fills all available space. Since my flex-direction is "column", I was expecting the outer container to fill the entire height of my screen, but apparently that's not the case.
Update:
I have now placed my outer-container and the inner-container inside a parent-container to showcase the issue I have when setting the height of the outer-container to 100vh: As you can see, the issue is that a height of 100vh for my outer-container is now too much - the correct height would be 100vh minus the height of the header.
add justify-content: center; on both containers
Your container does not take all screen height and vertical alignment is missing. Here is codepen https://codepen.io/ignasb/pen/KKBQzjQ with vertical and horizontal alignment. I added height and alignment css properties
.outer-container {
height: 100vh;
justify-content: center;
display: flex;
flex-direction: column;
}
Also you might want additional styles if that scrollbar appears.
body {
margin: 0;
}
The quick and dirty solution is to make the containing parent, body, .outer-container or some .wrapper, fill the full viewport with height: 100% or 100vh, eventually subtract heights of other elements in the same container and use below CSS to center its content.
display: grid; place-items: center;
snippet
/* Make sure padding/border size are part of element size */
* { box-sizing: border-box }
body { margin: 0 } /* remove default space, causes overflow */
.parent-container {
display: flex;
flex-direction: column;
height: 100vh; /* would cause overflow with body margin */
}
/* Takes space from .parent-container */
.header {
display: flex;
background-color: black;
padding: 2rem;
}
.outer-container {
flex: 1; /* Stretch to fill available space */
display: grid; place-items: center; /* Easy centering demo */
}
.inner-container {
display: flex;
flex-direction: column;
align-items: center;
cursor: default;
justify-content: center;
}
span {
padding: .5rem;
}
<div class="parent-container">
<div class="header">Header</div>
<div class="outer-container">
<div class="inner-container">
<h1>HEADING</h1>
<span>Some text here.</span>
</div>
</div>
</div>
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 2 months ago.
I have just started learning CSS, I ran into this problem. Please excuse me if its too silly to ask.
I want to center a DIV inside the body tag. I tired to use flexbox for this but somehow its coming in the center of the screen.
Here is the code.
<html lang="en">
<body>
<style type="text/css">
body
{
background: #6CB3A9;
display: flex;
justify-content: center;
align-items: center;
}
.main
{
width:300px;
height:300px;
background:white;
}
</style>
<div class="main">
<div class="white-bottom"></div>
<div class="red-top"></div>
<div class="yellow-center"></div>
</div>
</body>
</html>
No need for align-items: center; if you're using display: flex;:
Note: I set a height for the body to demonstrate that it sits horizontally in the center of the body tag.
<html lang="en">
<body>
<style type="text/css">
body
{
background: #6CB3A9;
display: flex;
justify-content: center;
// align-items: center;
height: 500px;
border: 1px solid grey
}
.main
{
width:300px;
height:300px;
background:white;
}
</style>
<div class="main">
<div class="white-bottom"></div>
<div class="red-top"></div>
<div class="yellow-center"></div>
</div>
</body>
</html>
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 2 years ago.
Hi so I just need some help on flexbox, ive looked at other people and even copied there code to test but for some reason it isnt working. I'm trying to get a div with content aligned in the center top of a website. Here is my current code,
index.html
<div class="header">
<div class="headerContent">
<h1>TEST<h1>
</div>
</div
style.css
html {
display: flex;
}
.header {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.headerContent {
background-color: #2C374C;
width: 100%;
justify-content: center;
}
when you use flex-direction: column;, to center horizontally use align-items: center; instead of justify-content: center;
You also have set a height property.
Example:
.header{
display: flex;
height: 300px;
justify-content: center;
align-items: center;
background: red
}
<header class="header">
<div>centered</div>
</header>
it seems you are doing the right thing but on the wrong element. Your are treating the .header id as the parent container when it is the child.
In this case the container hierarchy is the following html -> header -> .headerContent
So to center header you need to act on its parent. Imagine it as a parent giving order to its child (literally).
html {
display: flex;
justify-content: center;
}
by doing this the parent component is justifying its content (children)
I would also recommend instead of using html to create another div container to be the parent of your header div like so
.headerContainer {
display: flex;
justify-content: center;
background-color: red
}
.header {
display: flex;
}
.headerContent {
background-color: #2C374C;
width: 100%;
}
<div class="headerContainer">
<div class="header">
<div class="headerContent">
<h1>TEST<h1>
</div>
</div>
</div>
I think just like this
.header {
width: 100%;
}
.headerContent {
background-color: #2c374c;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
<html>
<link rel="stylesheet" href="style.css" />
<div class="header">
<div class="headerContent">
<h1>Test</h1>
</div>
</div>
</html>
Hello I am trying to have three groups of three buttons with each group appearing on a separate line, I managed to achieve this by just grouping them up with divs, however when i use flexbox to position the buttons in the center of the page, all the buttons appear on one line. Is there a way i could use flexbox for my positioning and still be able to have the buttons on separate lines?
html,body{
margin:0;
padding:0;
height:100%;
width:100%;
overflow: hidden;
}
.options{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.options a{
color: inherit;
text-decoration: none;
}
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="home.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<div class="options">
<div class="one">
<button>Maths</button>
<button>Computer Science</button>
<button>Physics</button>
</div>
<div class="two">
<button>Chemistry</button>
<button>Biology</button>
<button>Business Studies</button>
</div>
<div class="three">
<button>Philosophy</button>
<button>Geography</button>
<button>History</button>
</div>
</div>
</body>
</html>
.options{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
exemple : https://www.w3schools.com/cssref/css3_pr_flex-flow.asp
Try adding this
flex-flow:column;
This is a simplified version of a more complex problem. Suppose there are two divs within the body, which have to be vertically centered. Because of some other requirements DOM can't change. So only by changing css I need to vertically align them center. I have tried many other stackoverflow posts but so far couldn't make it work.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<style>
body{
}
.div1{
display: block;
background: red;
width: 300px;
}
.div2{
display: block;
background: green;
width: 300px;
}
</style>
</head>
<body>
<div class="div1">
<p>This is div1</p>
</div>
<div class="div2">
<p>This is div2</p>
</div>
</body>
</html>
This is possible using flexbox.
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
See this CodePen