This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Flexbox: center horizontally and vertically
(14 answers)
Centering in CSS Grid
(9 answers)
Closed 2 months ago.
Seen a few tutorials and doc now. Where its claimed,
all you need to do is the following to both horizontally and vertically align a div.
.grid {
display: grid;
place-items: center;
}
But is not true from what I see. It aligns horizontally but not vertically.
For it to align it vertically, you need to add height.
.grid {
display: grid;
place-items: center;
height: 500px;
}
But this is not being dynamic for it to always stay center for any height.
height: 100% doesn't work.
Am I doing something wrong, or the docs / tutorials are incorrect?
Trying this on Edge browser if it matters.
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
* {
padding: 0;
margin: 0;
}
.grid {
display: grid;
place-items: center;
}
</style>
<body>
<article class="grid">
<div>
😀
</div>
</article>
</body>
</html>
Doc and tutorial references:
https://developer.mozilla.org/en-US/docs/Web/CSS/place-items
https://www.youtube.com/shorts/njdJeu95p6s
https://youtu.be/qm0IfG1GyZU?t=128
The problem is that you haven't set height to the parent element.
You can use height: 100%;, but then you also need to set height to the parent element (i.e., <body> in your case).
See the snippet below.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
* {
padding: 0;
margin: 0;
}
body {
height: 100vh;
}
.grid {
display: grid;
place-items: center;
height: 100%;
border: 5px solid red;
}
</style>
<body>
<article class="grid">
<div>
😀
</div>
</article>
</body>
</html>
You may like to look up the way that width is treated in a block element.
e.g. in MDN
Note: A block-level element always starts on a new line and takes up
the full width available (stretches out to the left and right as far
as it can).
which is why your emoji centers horizontally.
The height is just the height of the content which is the emoji.
If you are trying to center the emoji in the middle of the viewport then give the element the height of the viewport. If you are trying to center it in its parent (which currently is the body element) then give it the height of the parent (height: 100%).
This snippet assumes you want it centered in the viewport:
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
* {
padding: 0;
margin: 0;
}
.grid {
display: grid;
height: 100vh;
place-items: center;
}
</style>
<body>
<article class="grid">
<div>
😀
</div>
</article>
</body>
</html>
Usually if you set margin: auto; for that element it gets centered in the parent element. But it should not be overwritten by other positioning attributes, so I suggest you try doing this solution to see if it works
You can not vertically in a section as the section by default does not have any extra height in it.
In the below code, you can see that if we apply height to the .height class then the section gets height.
you can use 100vh or 100% or some height in pixels
* {
padding: 0;
margin: 0;
}
body {
height: 100vh;
}
.grid {
display: grid;
background: #21977c69;
place-items: center;
}
.grid>div {
background: #fa977c69
}
.height {
height: 100%;
}
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<article class="grid">
<div>
😀
</div>
</article>
<article class="grid height">
<div>
this is a grid with a height
</div>
</article>
</body>
</html>
Related
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 3 months ago.
`
<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">
<link rel="stylesheet" href="./slider.css">
<title>slider</title>
</head>
<body>
flex
<script src="./slider.js"></script>
</body>
</html>
`
body {
background-color: #927df1;
display: flex;
align-items: center;
justify-content: center;
}
i watch in youtube but it's not working align-items: center;
justify-content: center; working
align-items: center; not working
why? youtube it's working..... plz help
The problem could be that you have not specified a flex-direction, which is necessary for align-items and justify-content to work. Try adding this to the body CSS:
flex-direction: column;
The problem is that you do not have content to apply align-items to. align-items is supposed to work on vertical alignment. what you are looking for is horizontal alignment probably.
check the following fiddle to get an idea of what is happening.
body {
background-color: #927df1;
display: flex;
}
.box{
width:200px;
height:200px;
border: 1px solid blue;
display:flex;
align-items:center;
}
<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">
<link rel="stylesheet" href="./slider.css">
<title>slider</title>
</head>
<body>
<div class="box">
flex
</div>
<div class="box">
flex
</div>
<div class="box">
flex
</div>
<script src="./slider.js"></script>
</body>
</html>
Edit: In case you want to use the align-items to center your content vertically, just define flex-direction property to column. Default value is row so it will align according to row height. setting it to column will align your content according to column's width.
Your code working properly just a minor mistake.
by default width and height is 100%; in this case we just simply define height as 100vh
body {
background-color: #927df1;
display: flex;
align-items: center;
justify-content: center;
height:100vh;
}
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;
}
This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Closed 1 year ago.
Please excuse the naïve html newbie question:
I am making an html layout and I want to start with no placeholder text. Just empty elements dividing the screen into three sections, into which I'll insert content later.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#ui {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
height: 100%;
}
.layout-block {
background-color: #4472C4;
margin: 3px;
}
</style>
</head>
<body>
<div id="ui">
<div id="section-1" class="layout-block"></div>
<div id="section-2" class="layout-block"></div>
<div id="section-3" class="layout-block"></div>
</div>
</body>
</html>
What I expect is something like this:
What I get is this:
I understand that is because the elements' heights are collapsing to zero, due to the absence of any content. But what do I do to fix this?
I would like the grid container (with the id ui) to expand to 100% of the screen height, and I'd like my empty divs to expand in height to fill it.
Many thanks for any help!
#ui is expanding to fill 100% of the available height. But since there is no content and nothing with padding or margin, both <html> and <body> are collapsing to zero height. Add:
html,body{ height: 100%; }
Simply replace height: 100% with height: 100vh in your #ui styles. It will give your grid container the height of 100% of the viewport.
Obs: I added a gap between the grid elements just to make their limits visible.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#ui {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
height: 100vh;
gap: 1rem;
}
.layout-block {
background-color: #4472C4;
border: 3px;
}
</style>
</head>
<body>
<div id="ui">
<div id="section-1" class="layout-block"></div>
<div id="section-2" class="layout-block"></div>
<div id="section-3" class="layout-block"></div>
</div>
</body>
</html>
I'm trying to create a responsive layout where header and footer take around 5% of screen and are fixed. The mid section scrolls depending on number of elements in it. Even though I only mention fr and % values, the element sizes stay static irrespective of screen size changes. In firefox responsive mode (galaxy s9), I see vertical and horizontal scroll bars outside of the container class. Could someone point out what I might be doing wrong ?
<html>
<head>
<meta charset="UTF-8">
<style>
.main{
display:grid;
grid-template-rows: 2fr 20fr 2fr;
gap: 2px;
}
.header{
background-color: lightblue
}
.container{
display: grid;
overflow: auto;
grid-auto-flow: row;
grid-auto-rows: 25%;
gap: 2px;
}
.tapbar{
background-color: pink
}
.content{
background-color:yellowgreen;
}
</style>
</head>
<body>
<div class='main'>
<div class='header'>header here</div>
<div class='container'>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
</div>
<div class='tapbar'>tap bar here</div>
</div>
</body>
Edit: Besides the selected answer, other mistake I was doing was not having html cover the entire area. Adding this to the style fixed it
html,body,.main{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
you just have to add the following meta tags in the head tag of your html page
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
My page starts to change zoom and layout gets slightly messed up when I have a hardcoded width on items located in a Flexbox container (make a very narrow Chrome Devtools responsive window). The problem starts when I make my viewing area narrower than the 300px. Unfortunately, you can't see this problem when running this inside an iframe on jsfiddle - it has to be ran "on it's own", my html block needs to be THE top html block.
Here's the jsfiddle for reference still:
https://jsfiddle.net/elijahww/9e1u7ptr/
<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#productShowcaseContainer {
display: flex;
flex-direction: column;
height: 100vh;
width: 100vw;
}
.contentContainer {
display: flex;
flex: 1;
}
#productShowcaseTitle {
height: 100px;
background-color: antiquewhite;
}
#productShowcaseThumbnailContainer {
flex: 1;
background-color: darkseagreen;
}
</style>
</head>
<body style="margin: 0;">
<div id="productShowcaseContainer">
<div id="productShowcaseTitle"></div>
<div class="contentContainer">
<div id="productShowcaseThumbnailContainer" style="padding: 10px;">
<input style="width:300px;">
</div>
</div>
</div>
</body></html>
I don't know how to make this work.
here is a gif:
This might be happening because you have hard-coded width of input field as 300px and trying to zoom screen width beyond this.
If you really want to have responsive layout then you should be using flex-layout properly and set flex-basis, flex-grow and flex-shrink property of each layout element.
These properties are responsible for handling responsive behaviour of flex-elements.
To Read more about flex layout follow this link Flex tutorial
One option is to give some parent container overflow-x: auto
body {
background-color: #3d5d6a;
}
#container {
display: flex;
flex-direction: column;
height: 100vh;
width: 100vw;
}
.main-content-container {
display: flex;
flex: 1;
}
#top-header-container {
padding: 10px;
height: 100px;
background-color: antiquewhite;
/*align-content: stretch;*/
display: flex;
justify-content: stretch;
}
#main-content-inner {
flex: 1;
background-color: darkseagreen;
}
.responsive-table {
overflow-x: auto;
}
<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="margin: 0;">
<div id="container">
<div id="top-header-container">
<div class="responsive-table">
<input style="width:400px;" value="hard coded to 400px">
</div>
</div>
<div class="main-content-container">
<div id="main-content-inner" style="padding: 10px;">
test
</div>
</div>
</div>
</body></html>