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)
How can I vertically align elements in a div?
(28 answers)
Closed 2 years ago.
Lets say I have this simple html page:
<div class="main">
<div class="header">
<h1>HEADER</h1>
</div>
<div class="content">
<div class="box">
</div>
</div>
</div>
My header is fixed and the content should be beneath it and with height 100% of what ever left of the body.
I've already done that with this style:
*{
margin-left: 0;
margin-top: 0;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
.header {
background-color: red;
text-align: center;
position: fixed;
width: 100%;
}
.content {
background-color: antiquewhite;
padding-top: 38px;
}
h1 {
margin-bottom: 0;
}
.main {
display: flex;
flex-direction: column;
height: 100vh;
}
.content {
flex: 1;
}
.box {
width: 150px;
height: 150px;
background-color: yellow;
}
Here's how the page looks for now: https://elbargho.github.io/sudoku/centerdiv.html
now I'm trying to center the box div horizontally and vertically in relative to the full body - the header size
what I've tried to do:
margin-top: 50% - for some reason the box went all the way down to the bottom
setting the position of content div to relative, and of box div to absolute - the content div overlapped the fixed header
You can set content class as
.content {
/* flex: 1; */
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
*{
margin-left: 0;
margin-top: 0;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
.header {
background-color: red;
text-align: center;
position: fixed;
width: 100%;
}
.content {
background-color: antiquewhite;
padding-top: 38px;
}
h1 {
margin-bottom: 0;
}
.main {
display: flex;
flex-direction: column;
height: 100vh;
}
.content {
/*flex: 1; */
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.box {
width: 150px;
height: 150px;
background-color: yellow;
}
<div class="main">
<div class="header">
<h1>HEADER</h1>
</div>
<div class="content">
<div class="box">
</div>
</div>
</div>
This is probably what you need. Documented in the code.
* {
margin-left: 0;
margin-top: 0;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
/* Modified */
.header {
background-color: red;
text-align: center;
/* position: fixed; */
position: sticky;
width: 100%;
}
.content {
background-color: antiquewhite;
padding-top: 38px;
}
h1 {
margin-bottom: 0;
}
/* Modified */
.main {
display: flex;
flex-direction: column;
height: 100vh;
align-items: center;
}
/* Modified */
.content {
/*flex: 1;*/
display: flex;
align-items: center;
height: inherit;
}
.box {
width: 150px;
height: 150px;
background-color: yellow;
}
<div class="main">
<div class="header">
<h1>HEADER</h1>
</div>
<div class="content">
<div class="box">
</div>
</div>
</div>
Here solution:
.content {
display: flex;
flex: 1;
justify-content: center;
align-items: center;
}
One way is to use CSS Transform.
.box {
position: relative;
top: 50%;
transform: translateY(-50%);
/* horizontal center */
margin: 0 auto;
}
Check out this website for all CSS centering help:
http://howtocenterincss.com/
Related
This question already has answers here:
Can't scroll to top of flex item that is overflowing container
(12 answers)
Closed 10 months ago.
I like to have a div that keeps all it's children in the center (vertical and horizontal). I can easily achieve this by using flexbox. But when width of my children get bigger than the parent, a part of children is not visible.
How can I fix this?
Codepen
* {
margin: 0;
padding: 0;
}
.container {
height: 500px;
width: 500px;
background: red;
display: flex;
justify-content: center;
align-items: center;
overflow: scroll;
}
.children {
min-width: 1200px;
height: 50px;
background: blue;
}
<div class='container'>
<div class="children">
<h1>Welcome to my city, california</h1>
</div>
</div>
You just have to change the justify-content to be flex-start
See below.
And if you want the H1 to be centered, just use text-align: center
* {
margin: 0;
padding: 0;
}
.container {
height: 500px;
width: 500px;
background: red;
display: flex;
justify-content: flex-start;
align-items: center;
overflow: scroll;
}
.children {
min-width: 1200px;
height: 50px;
background: blue;
}
<div class='container'>
<div class="children">
<h1>Welcome to my city, california</h1>
</div>
</div>
Change the .container{
min-width: 100%}
* {
margin: 0;
padding: 0;
}
.container {
height: 500px;
width: 500px;
background: red;
display: flex;
justify-content: center;
align-items: center;
overflow: scroll;
}
.children {
min-width: 100%;
height: 50px;
background: blue;
}
<div class='container'>
<div class="children">
<h1>Welcome to my city, california</h1>
</div>
</div>
This question already has answers here:
CSS: Width in percentage and Borders
(5 answers)
Closed 3 years ago.
I want to create a bar to go along the top of a box on a website that I am working on.
This is the desired outcome
Here's my code, I keep getting this overlap
.page {
display: flex;
flex-wrap: wrap;
position: relative;
}
.section {
border: 2px solid #FBA7FF;
width: 85%;
height: 30%;
margin: 1vw;
padding: 1vw;
display: flex;
align-items: center;
position: relative;
z-index: 1;
}
.section h1 {
position: relative;
}
.section_header {
border: 4px solid #FBA7FF;
position: absolute;
top: 0;
left: 0;
width: 100%;
bottom: 95%;
}
<div class='page'>
<div class='section'>
<div class="section_header"></div>
<h1>sample text</h1>
</div>
</div>
So far I've got the parent div with position: relative and the child element with position: absolute then setting top and left to 0 width to 100% and bottom to 95% to attempt the desired effect yet it creates an overlap.
I can see that 0 is within the div and doesn't take into account the border which is perhaps why this is happening.
* {
box-sizing: border-box;
margin: 0;
}
.page {
display: flex;
flex-wrap: wrap;
position: relative;
}
.section {
width: 100%;
display: inline-block;
text-align: center;
}
.section_header {
width: 100%;
background: #FBA7FF;
display: block;
height: 70px;
margin-bottom: 20px;
}
<div class='page'>
<div class='section'>
<div class="section_header"></div>
<h1>sample text</h1>
</div>
</div>
Remove the position:absolute and use flex-direction:column;
* {
margin: 0;
padding: 0;
}
.page {
display: flex;
flex-wrap: wrap;
flex-direction: column;
min-height: 100vh;
background: lightgrey;
position: relative;
}
.section {
border: 2px solid #FBA7FF;
width: 85%;
margin: 1vh auto;
height: 30%;
background: lightgreen;
display: flex;
flex-direction: column;
flex: 1;
align-items: center;
}
.section_header {
height: 50px;
width: 100%;
background: orange;
}
<div class='page'>
<div class='section'>
<div class="section_header"></div>
<h1>sample text</h1>
</div>
</div>
I am trying to fit 4 divs within the view bounds of a non-scrolling column flexbox but I can't seem to get it working.
What I want:
What I experience:
I have no idea what I am doing and just randomly permutating flex-related CSS fields to try and fix it haha. If someone could point out what is wrong I would love you forever.
Here is the gist of my code:
body {
overflow: hidden;
margin: 0;
width: 100%;
height: 100%;
}
#flexcontent {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
#header #firstContent #secondContent {
flex: 1 1 auto;
}
#header {
background-color: green;
font-weight: 700;
align-content: center;
font-size: 7rem;
}
#firstContent {
background-color: red;
}
#secondContent {
background-color: yellow;
}
#picture {
background-color: blue;
flex: 0 1 auto;
}
<body>
<div id="flexcontainer">
<div id="header">Title</div>
<div id="picture"><img src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall-1140x760.jpg"/></div>
<div id="firstContent">first</div>
<div id="secondContent">second</div>
</div>
</body>
Try this below. And use object-fit if image doesn't expand or shrink as expected or aspect ratio changes.
#flexcontainer {
display: flex;
flex-direction: column;
height: 100vh;
}
#picture {
flex: 1;
min-height: 0;
}
body {
margin: 0;
}
img {
object-fit: contain;
height: 100%;
width: auto;
}
<div id="flexcontainer">
<div id="header">Title</div>
<div id="picture"><img src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall-1140x760.jpg" /></div>
<div id="firstContent">first</div>
<div id="secondContent">second</div>
</div>
Please check your container div id
<div id="flexcontainer">
change
#flexcontent {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
to
#flexcontainer {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
try object-fit for img
img {
object-fit: contain;
height: 100%;
}
there is a few thing to fix in your CSS, typo and value used
html, /* to inherit height */
body {
margin: 0;
width: 100%;
height: 100%;
}
#flexcontainer {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
min-height: 0; /* force size calculation*/
}
#header,/* you meant each one of them */
#firstContent,
#secondContent {
flex: 1;
margin: 2px 5vw;/* for demo */
}
#header {
background-color: green;
font-weight: 700;
/* align-content: center; or did you forget display:flex here */
font-size: calc(1rem + 2vw);
}
#firstContent {
background-color: red;
}
#secondContent {
background-color: yellow;
}
#picture {
display: flex;
min-height: 0; /* force size calculation*/
}
img {
max-height: 90%;/* whatever */
margin: auto;/* or align-content + justify-content : center on flex parent*/
}
<div id="flexcontainer">
<div id="header">Title</div>
<div id="picture"><img src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall-1140x760.jpg" /></div>
<div id="firstContent">first</div>
<div id="secondContent">second</div>
</div>
Allow the item holding the image to shrink below its content size.
Define the parameters of the image.
(Tested in Chrome, Firefox and Edge.)
#flexcontainer {
display: flex;
flex-direction: column;
height: 100vh;
}
#picture {
min-height: 0;
background-color: blue;
}
#picture>img {
width: 100%;
max-height: 100%;
object-fit: contain;
}
#header {
background-color: green;
font-weight: 700;
font-size: 7rem;
}
#firstContent {
background-color: red;
}
#secondContent {
background-color: yellow;
}
body {
margin: 0;
}
<div id="flexcontainer">
<div id="header">Title</div>
<div id="picture"><img src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall-1140x760.jpg" /></div>
<div id="firstContent">first</div>
<div id="secondContent">second</div>
</div>
jsFiddle demo
I've tidied up your html a little and simplified the CSS. You want to take the overflow: hidden off of the body tag, and give each of your elements a class instead of an id. Finally, simplify the image section by making the image tag itself a flexbox item:
html,
body {
height: 100%
}
body {
/*overflow: hidden;*/
margin: 0;
}
.flexContainer {
display: flex;
flex-direction: column;
height: 100%;
}
.flexContainer__header,
.flexContainer__firstContent,
.flexContainer__secondContent {
flex: 1 1 auto;
}
.flexContainer__header {
background-color: green;
font-weight: 700;
align-content: center;
font-size: 7rem;
}
.flexContainer__firstContent {
background-color: red;
}
.flexContainer__secondContent {
background-color: yellow;
}
.flexContainer__picture {
display: block;
width: 100%;
}
<div class="flexContainer">
<div class="flexContainer__header">Title</div>
<img class="flexContainer__picture" src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall-1140x760.jpg" />
<div class="flexContainer__firstContent">first</div>
<div class="flexContainer__secondContent">second</div>
</div>
I need to make an image take the maximum size (taking max width or max height) in a flex container.
Since the parent container doesn't have a fixed width and height, I can't use max-width and max-height and flex:1 is not working either.
Here is an example of the problem : https://jsfiddle.net/vb26u0e5/2/
I would like the image to take automaticaly all the available green space (remove the width: 40px; line 20).
#mainContainer {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
color: white;
}
#imageContainer {
flex: 1;
display: flex;
justify-content: space-between;
background-color: green;
}
#image {
width: 40px;
}
#previous,
#next {
display: flex;
align-items: center;
justify-content: center;
font-size: 25px;
padding: 0 10px;
background-color: purple;
}
#title,
#footer {
text-align: center;
}
#title {
background-color: blue;
}
#footer {
background-color: red;
}
<div id="mainContainer">
<div id="title">TITLE</div>
<div id="imageContainer">
<div id="previous"><</div>
<img id="image" src="https://via.placeholder.com/1920x1080" />
<div id="next">></div>
</div>
<div id="footer">FOOTER</div>
</div>
Add this to your code:
#image {
width: 40px;
flex-grow: 1; /* new */
}
Normally, you would be able to use flex-basis (which is equivalent to width, in this case), and do some like this:
#image {
flex: 1; /* fg:1, fs:1, fb:0 */
}
OR
#image {
flex: 1 0 40px;
}
However, some browsers have a bug which causes them to ignore flex-basis in nested flex containers. So the width / flex-grow combination is a clean workaround.
For more details see the "Browser Bugs" section in my answer here:
What are the differences between flex-basis and width?
The demo below covers the issue answered above, plus height issues – aspect ratio and vertical scroll – by wrapping the image in a div and using absolute positioning and object-fit on the image.
Tested in Chrome, Firefox and Edge.
#mainContainer {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
color: white;
}
#imageContainer {
flex: 1;
display: flex;
justify-content: space-between;
background-color: green;
}
#image {
flex-grow: 1;
position: relative;
}
img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
#previous,
#next {
display: flex;
align-items: center;
justify-content: center;
font-size: 25px;
padding: 0 10px;
background-color: purple;
}
#title,
#footer {
text-align: center;
}
#title {
background-color: blue;
}
#footer {
background-color: red;
}
<div id="mainContainer">
<div id="title">TITLE</div>
<div id="imageContainer">
<div id="previous"><</div>
<div id="image">
<img src="https://pixabay.com/get/52e3dc454f50a414f6d1867dda6d49214b6ac3e45657744e7d2b72dc90/oldtimer-4396528_1920.jpg" />
</div>
<div id="next">></div>
</div>
<div id="footer">FOOTER</div>
</div>
jsFiddle
use object-fit property to specify how the image should be resized to fit its container. I have set it to object-fit: cover which will cut off the sides of the image, preserving the aspect ratio, and also filling in the space. Also use flex-grow:1 to fill the 'green' space.
#mainContainer {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
color: white;
}
#imageContainer {
display: flex;
justify-content: space-between;
background-color: green;
}
#image {
object-fit: cover;
flex-grow: 1;
height: 100%;
overflow: hidden;
}
#previous,
#next {
display: flex;
align-items: center;
justify-content: center;
font-size: 25px;
padding: 0 10px;
background-color: purple;
}
#title,
#footer {
text-align: center;
}
#title {
background-color: blue;
}
#footer {
background-color: red;
}
<div id="mainContainer">
<div id="title">TITLE</div>
<div id="imageContainer">
<div id="previous"><</div>
<img id="image" src="https://via.placeholder.com/1920x1080" />
<div id="next">></div>
</div>
<div id="footer">FOOTER</div>
</div>
You can calc the width based on Vertical Width (100vw) & remove the padding of your PREV/NEXT
Something like this?
#mainContainer {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
color: white;
}
#imageContainer {
flex: 1;
display: flex;
justify-content: space-between;
background-color: green;
}
#image {
width: calc(100vw - 50px);
height: 100vh;
}
#previous,
#next {
display: flex;
align-items: center;
justify-content: center;
font-size: 25px;
padding: 0 10px;
background-color: purple;
}
#title,
#footer {
text-align: center;
}
#title {
background-color: blue;
}
#footer {
background-color: red;
}
<div id="mainContainer">
<div id="title">TITLE</div>
<div id="imageContainer">
<div id="previous"><</div>
<img id="image" src="https://via.placeholder.com/1920x1080" />
<div id="next">></div>
</div>
<div id="footer">FOOTER</div>
</div>
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 6 years ago.
I want the content to be centered vertically and horizontally but it gets centered only horizontally. The problem is that I don't have fixed height.
Thank you guys for help!
html,
body {
height: 100% margin: 0;
overflow: hidden;
}
.content {
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
display: flex;
flex-direction: column;
text-align: center;
}
<div class="content">
<h1>Welcome to the website!</h1>
</div>
You can easily center an element respect to the parent in this way (assuming that the parent has position: relative;).
In your example:
h1 {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
You can also center it in the middle of the screen using position: fixed; instead.
Follow this code
HTML
<body >
<div class="content">
<h1>Welcome to the website!</h1>
</div>
</body>
CSS
html,body {
height : 100%;
width : 100%;
}
.content {
height : 100%;
width : 100%;
display: table;
}
h1 {
text-align: center;
display: table-cell;
vertical-align: middle;
}
Follow this code.
body{
margin: 0;
padding: 0;
}
.content-wrapper{
background-color: #121212;
display: block;
left: 0;
height: 100%;
padding: 15px;
position: fixed;
top: 0;
width: 100%;
}
.content{
background-color: #f5f5f5;
display: table;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 100%;
}
.centent-cell{
display: table-cell;
height: 100%;
vertical-align: middle;
width: 100%;
}
h1{
color: #121212;
}
<div class="content-wrapper">
<div class="content">
<div class="centent-cell">
<h1>Welcome to the website!</h1>
</div>
</div>
</div>
Here's an example of what you need:
<section>
<div class="centerize">
<div class="v-center">
<div class="box">Say my name!</div>
</div>
</div>
</section>
and CSS
section {
height: 100vh;
background: #fff;
}
.centerize {
display: table;
height: 100%;
width: 100%;
}
.v-center {
display: table-cell;
vertical-align: middle
}
.box {
background: #000;
width: 10%;
margin: 0 auto;
}