This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 6 months ago.
I am trying to make DIV verticle and horizontal center. I am using code from here : How can I vertically center a div element for all browsers using CSS?
I tried both
display: grid;
place-items: center;
and
display: flex;
align-items: center;
justify-content: center;
My code :
body {
background: #000000 50% 50%;
overflow-x: hidden;
overflow-y: hidden;
}
.video {
display: grid;
place-items: center;
}
<body> <div class="video">
<img src="https://place-hold.it/25x25" />
</div> </body>
Horizontal center : Success
Vertical center : failed
with above two CSS code.
It isn't working because elements by default have a height to fit-content. So you need to define a height higher then the fit-content height:
body {
background: black;
margin: 0;
}
.video {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
<body>
<div class="video">
<img src="https://place-hold.it/25x25" />
</div>
</body>
body {
background: black;
margin: 0;
}
.video {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
<body>
<div class="video">
<img src="https://place-hold.it/25x25" />
</div>
</body>
You need to apply height: 100%; to the div and all its ancestors (i.e. body and html in this case) for the flexbox centering method to work, otherwise it will only have the height of its contents (i.e. the image) and not fill the viewport vertically.
html, body {
height: 100%;
margin: 0;
}
body {
background: #000000 50% 50%;
overflow-x: hidden;
overflow-y: hidden;
}
.video {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
<body>
<div class="video">
<img src="https://place-hold.it/25x25" />
</div>
</body>
You can just add height as 100vh in video class.
body {
background: #000000 50% 50%;
overflow-x: hidden;
overflow-y: hidden;
}
.video {
display: grid;
place-items: center;
height: 100vh;
}
<body>
<div class="video">
<img src="https://place-hold.it/25x25" />
</div>
</body>
If you want to center both vertically and horizontally, you can try this code below on your CSS:
body {
display: flex;
justify-content: center;
align-items: center;
height:100vh;
}
<body>
<div class="video">
<img src="https://place-hold.it/25x25" />
</div>
</body>
Related
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 1 year ago.
I just can't center the div(Horizontal-Container)both vertically and horizontally and I can't figure out why it's not working...
I've try all the methods by w3school, but either it's not horizontally or vertically center, it can't be both achieved...
Below is my code:
body {
background-color: #62306D;
}
.Horizontal-Container {
width: 100%;
height: auto;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
text-align: center;
}
.Yellow {
background-color: #F7EC7D;
width: 90px;
height: 180px;
}
<div class="Horizontal-Container">
<div class="Yellow"></div>
<div class="Yellow"></div>
<div class="Yellow"></div>
</div>
Your issue arises from .Horizontal-Container not being full height so it is technically vertically centered, just it hasn't moved. To fix this, you need to set the height of body and html to 100% which then allows the container to have the height you desire. It may seem off centre now, but that is down to padding and margin on the elements which you can easily remove.
html, body {
background-color: #62306D;
height: 100%;
margin: 0;
padding: 0;
}
.Horizontal-Container {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
text-align: center;
}
.Yellow {
background-color: #F7EC7D;
width: 90px;
height: 180px;
}
<div class="Horizontal-Container">
<div class="Yellow"></div>
<div class="Yellow"></div>
<div class="Yellow"></div>
</div>
It's not working because your .Horizontal-Container does not have a specific height. If you set the height to auto it will consume as much space as its children need. Thus you have to add a height either to your container or simply to your body in order to center your elements over the whole page.
body {
background-color: #62306D;
}
.Horizontal-Container {
width: 100%;
height: 100vh; /* <-- set a specific height */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
text-align: center;
}
.Yellow {
background-color: #F7EC7D;
width: 90px;
height: 180px;
}
<div class="Horizontal-Container">
<div class="Yellow"></div>
<div class="Yellow"></div>
<div class="Yellow"></div>
</div>
This question already has answers here:
How can I horizontally center an element?
(133 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 2 years ago.
I have a container div which has other divs and contents within it and I am trying to center the outer div.
For example:
body {
height: 100vh;
width: 100vw;
}
.test {
width: 20vw;
height: 20vh;
background-color: green;
}
.outer-test {
display: block;
margin: auto;
}
<div class="outer-test">
<p>Hello</p>
<div class="test"></div>
</div>
In the example above, how would I be able to center the div with class of "outer-test"? I have tried to make the display: block and use margin: auto but that doesn't seem to be working.
Option 1: You can use display: flex on the body
body{
height: 100vh;
width: 100vw;
display: flex;
justify-content: center; // Centers in the direction of flex-direction (default is row)
align-items: center; // Centers in the direction normal to flex-direction
}
.test{
width: 20vw;
height: 20vh;
background-color: green;
}
<body>
<div class="outer-test">
<p>Hello</p>
<div class="test"></div>
</div>
</body>
Option 2: You can use a wrapper around your outer div.
body {
height: 100vh;
width: 100vw;
}
.test {
width: 20vw;
height: 20vh;
background-color: green;
}
.center {
display: flex;
justify-content: center;
}
<body>
<div class="center">
<div class="outer-test">
<p>Hello</p>
<div class="test"></div>
</div>
</div>
</body>
This question already has answers here:
Centered elements inside a flex container are growing and overflowing beyond top [duplicate]
(3 answers)
Closed 2 years ago.
I created this css snippet.
.container {
display: flex;
justify-content: center;
width: 100%;
align-items: center;
height: calc(100vh - 50px);
}
.container__img {
display: flex;
flex-direction: column;
}
.header {
background-color: red;
padding: 25px;
}
<div class="header">HEADER</div>
<div class="container">
<div class="container__inner">
<div class="container__img">
HELLO
<img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg" />
</div>
</div>
</div>
I set 100vh to have the page 100% of page height, but appears the next issue when i resize the page vertically:
How you can see the image goes over the header, but it should stop when is near header like:
Question: Why it is happening and how to solve this?
Make it a habit for yourself to wrap all the divas in the main div:
<div class="main">
...
</div>
When this main div is absent in the structure of html, then problems may arise in the future.
I made some changes to the css. If you have any questions, then ask me.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.main {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
display: flex;
justify-content: center;
width: 100%;
align-items: center;
flex: auto;
}
.container__img {
display: flex;
flex-direction: column;
}
.header {
background-color: red;
padding: 25px;
}
<div class="main">
<div class="header">HEADER</div>
<div class="container">
<div class="container__inner">
<div class="container__img">
HELLO
<img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg" />
</div>
</div>
</div>
</div>
When you resize the page vertically, the image goes over the header because the div "container__inner" and the div "container__img" have height: auto (by default). That means their height will be equal to the maximum height of the elements inside (here is the img).
To solve this problem, you just need to set height: 100% for one of them. Then its height will not exceed the height of the parent element (the div "container")
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.main {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
display: flex;
justify-content: center;
width: 100%;
align-items: center;
flex: auto;
}
.container__img {
display: flex;
flex-direction: column;
text-align: center;
}
.header {
background-color: red;
padding: 25px;
text-align: center;
}
<div class="main">
<div class="header">HEADER</div>
<div class="container">
<div class="container__inner">
<div class="container__img">
HELLO
<img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg" />
</div>
</div>
</div>
</div>
Is it possible to use flexbox to center vertically and horizontally for background color purposes?
.wrapper {
display: flex;
width: 100vw;
height: 100vh;
text-align: center;
}
.item {
flex: 1;
background-color: green;
align-self: center;
justify-content: center;
}
<div class='wrapper'>
<div class='item'>
sdafsdfs
</div>
</div>
If I add a height: 100% the text moves back to the top.
Add display: flex for your items. Then only it can align items inside it as per your requirements. Please have a look at the updated code.
.wrapper {
display: flex;
width: 100vw;
height: 100vh;
text-align: center;
}
.item {
display: flex;
background-color: green;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
<div class='wrapper'>
<div class='item'>
sdafsdfs
</div>
</div>
Hope this help
Is it possible to position div#d2 directly under the div#d1 container per markup below instead of positioning outside the height of the wrapper?
#wrapper {
height: 100%;
display: flex;
background-color: steelblue;
align-items: center;
min-height: 100%;
/* fallback style for browsers that do not support the `vh` unit */
min-height: 100vh;
}
#d2 {
margin-top: 0.25rem;
text-align: center;
background-color:#336712;
}
<body>
<div id="wrapper">
<div id="d1">lorem ipsum</div>
</div> <!-- #wrapper -->
<div id="d2">This should appear .25rem's under #d1 container</div>
</body>
Here's a pic of what I am trying to achieve:
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: steelblue;
}
#wrapper {
display: flex;
}
#d2 {
margin-top: 0.25rem;
text-align: center;
background-color: #336712;
}
<div id="wrapper">
<div id="d1">lorem ipsum</div>
</div>
<!-- #wrapper -->
<div id="d2">This should appear .25rem's under #d1 container</div>
jsFiddle demo