I have a two column layout. Left has an image. Right has 2 images on top of each other. My goal is to have the images increase as much as possible but have to keep their aspect ratio. And of cause can't overflow outside the containing height.
Right now if you change the width of the browser window, the image resize respecively in a correct way. But if you decrease the height of the window, the images does not decrease in size.
Any tips.
outer-container has height calc(100vh -100px). it is suppose to simulate having a sticky footer.
.outer-container {
display: flex;
background-color: green;
height: calc(100vh - 100px);
clear: auto;
}
.left-column {
}
.right-column {
display:flex;
justify-content: top;
flex-direction: column;
}
.left-image {
width: 100%;
}
.right-image {
width: 100%;
}
/* Currently using image tag but meant to work with video as well, easier to create a snippet for img though!*/
<div class="outer-container">
<div class="left-column">
<img class="left-image" src="https://via.placeholder.com/200x500/333300">
</div>
<div class="right-column">
<img class="right-image" src="https://via.placeholder.com/500X250/33000">
<img class="right-image" src="https://via.placeholder.com/500x250/003300">
</image>
</div>
</div>
Just add max-height properties to the .left-image and .right-image rules so they do not overflow their parent containers.
.outer-container {
display: flex;
background-color: green;
height: calc(100vh - 100px);
clear: auto;
}
.left-column {
}
.right-column {
display:flex;
justify-content: top;
flex-direction: column;
}
.left-image {
width: 100%;
max-height: 100%;
}
.right-image {
width: 100%;
max-height: 50%;
}
/* Currently using image tag but meant to work with video as well, easier to create a snippet for img though!*/
<div class="outer-container">
<div class="left-column">
<img class="left-image" src="https://via.placeholder.com/200x500/333300">
</div>
<div class="right-column">
<img class="right-image" src="https://via.placeholder.com/500X250/33000">
<img class="right-image" src="https://via.placeholder.com/500x250/003300">
</image>
</div>
</div>
This might work as a starting point. Not 100% sure how you want the first column in relation to the second.
I added a footer since you seemed to indicate that?
.outer-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr) 100px;
background-color: green;
height: 100vh;
}
.left-column {
/* keeps the left image in the box */
min-height: 0;
grid-row: 1 / 2;
grid-column: 1 / 1;
border: solid cyan 2px;
display: flex;
justify-content: center;
}
.right-column {
border: solid yellow 2px;
display: flex;
align-items: start;
justify-content: top;
flex-direction: column;
}
.left-image {
height: 100%;
}
.right-image {
width: 100%;
}
.footer {
/* put accross all columns of last row and super center content */
grid-column: 1 / 3;
grid-row: 3 / 3;
background-color: #ffdd88;
display: grid;
align-items: center;
justify-content: center;
}
<div class="outer-container">
<div class="left-column">
<img class="left-image" src="https://via.placeholder.com/200x500/333300">
</div>
<div class="right-column">
<img class="right-image" src="https://via.placeholder.com/500X250/33000">
<img class="right-image" src="https://via.placeholder.com/500x250/003300">
</div>
<div class="footer"> I am the footer thing</div>
</div>
Sample code:
a {
background: tan;
}
div {
width: 100px;
height: 200px;
background: green;
}
Link 1
This is link 2.
3rd
<div></div>
This is the effect I wish to achieve:
It's easy to vertically align the anchor elements by something like display: block, but I have no idea how to put the <div> element next to them.
Note 1: The above is just a sample code. My actual links can be any width.
Note 2: The <div> needs to be the anchors' next sibling. It can be any height.
I would go for a grid:
You can set it to adapt automatically to the inner dimensions.
You only need to set some row and column properties to locate the inner elements
a {
background: tan;
grid-column: 1;
}
a:nth-child(2) {
grid-row: 2;
}
#mydiv {
width: 100px;
height: 200px;
background: green;
grid-column: 2;
grid-row: 1 / 5;
}
.container {
display: grid;
grid-template-columns: max-content auto;
grid-template-rows: auto auto auto 1fr;
}
<div class="container">
Link 1
This is link 2.
3rd
<div id="mydiv"></div>
</div>
It will work also in the case of a huge margin bottom on anchors
a {
background: tan;
grid-column: 1;
margin-bottom: 200px;
}
a:nth-child(2) {
grid-row: 2;
}
#mydiv {
width: 100px;
height: 200px;
background: green;
grid-column: 2;
grid-row: 1 / 5;
}
.container {
display: grid;
grid-template-columns: max-content auto;
grid-template-rows: auto auto auto 1fr;
}
<div class="container">
Link 1
This is link 2, now longer.
3rd
<div id="mydiv"></div>
</div>
Try this solution
First we need two columns, one column for links, second for the DIV
tag. I preferred to take the grid.
Used fit-content to for fit background on links.
The DIV needs to set as position: absolute, because without
absolute position, div will be resize only the first row in the
second column.
For adjustment width of the div, i was create a variable. This
resizes both the second column of the grid and width of the div.
:root {
--second-column: 100px;
}
body {
width: min-content;
display: grid;
grid-template-columns: max-content var(--second-column);
grid-auto-rows: min-content;
row-gap: 1rem;
column-gap: 2rem;
background-color: hsl(201, 27%, 10%);
position: relative;
}
a {
grid-column: 1;
width: fit-content;
background: tan;
}
div {
grid-column: 2;
grid-row: 1 / -1;
width: var(--second-column);
height: 200px;
position: absolute;
background: green;
}
Link 1
This is link 2.
3rd
<div></div>
The good old float
a {
background: tan;
margin: 5px;
/* all the links at the left
above each other */
float: left;
clear: left;
}
div {
width: 100px;
height: 200px;
background: green;
overflow: auto; /* do not overlap the links and stay at the right */
}
Link 1
This is link 2.
3rd
<div></div>
Here, check this out.
a {
background: tan;
display: block;
margin-bottom: 5px;
}
div {
width: 100px;
height: 100px;
display: inline-block;
vertical-align: top;
}
div.div2 {
background: green;
}
<div>
Link 1
This is link 2.
3rd
</div>
<div class="div2"></div>
a {
background: tan;
}
#child-1 {
display: flex;
flex-direction: column;
align-items: flex-start;
}
#child-2 {
width: 100px;
height: 100px;
background: green;
}
#parent {
display: flex;
}
<div id="parent">
<div id="child-1">
Link 1
This is link 2.
3rd
</div>
<div id="child-2"></div>
</div>
Easiest is to use float:left; on all links as mentioned before. but we probably don't really like float for situations where we also might want to do more complex stuff.
Also you might want to add markup for semantic purposes anyway (like <nav> for the links). The only reason I could make up for the links having to be siblings of the div is javaScript, and bet it will be possible to tune it more performant with slightly more markup around.
To do so you might want to have a look at flexbox like so:
.container{
display:flex;
flex-direction: row;
justify-content: space-between;
border: 1px solid blue;
}
ul{
flex: 1 1 auto;
align-self: flex-start;
display:flex;
flex-direction: column;
padding: 0;
margin: 0;
}
li{
border: 1px solid red;
flex: 1 1 auto;
}
a {
background: tan;
}
div.main {
flex: 0 1 100px;
height: 200px;
background: green;
}
<div class="container">
<ul>
<li>Link 1</li>
<li>This is link 2.</li>
<li>3rd</li>
</ul>
<div class="main">lore ipsum</div>
</div>
No matter how you do it you need a little more markup to solve this if you want a generic answer but not use float. There might be a way around this in certain situations but there is none in a genric scenario. That is if you do not allow javaScript to fix it (which would most likely be an unresasonable solution).
The li of cause is unnecessary for your question but in general its a good idea not to position a tags directly but to wrap them. a-tags also tend to have unforeseen bugs when positioned with flexbox.
The surrounding div.container could be the documents body tag instead. Then you could simplify to:
body{
display:flex;
flex-direction: row;
justify-content: space-between;
border: 1px solid blue;
}
nav{
flex: 1 1 auto;
align-self: flex-start;
display:flex;
flex-direction: column;
padding: 0;
margin: 0;
}
a {
background: tan;
}
div {
flex: 0 1 100px;
height: 200px;
background: green;
}
<nav>
Link 1
This is link 2.
3rd
</nav>
<div>lorem ipsum</div>
i used and change this solution inside my answer.
div element gives links higtht and stays after theme.
body {
display: grid;
grid-template-columns: 1fr max-content;
width: max-content;
}
a {
background: tan;
margin: 50px;
grid-column: 1;
width: fit-content;
}
div {
width: 100px;
min-height: 200px;
background: green;
grid-column: 2;
grid-row: 1 / 9999;
}
Link 1
This is link 2.
3rd
4th long long and too long link. f it Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate nostrum quibusdam cupiditate deleniti possimus sit!
<div></div>
You have to use position property and display inline-block or you can use display flex
a {
background: tan;
display:block;
margin-bottom: 16px;
width: 100px;
}
.main {
width: 100px;
height: 100px;
background: green;
position: absolute;
left: 20%;
top: 8px;
}
Link 1
This is link 2.
3rd
<div class="main"></div>
Use CSS clear Property to make anchor elements not allowed to Float on the left side in relation to other element
Using CSS Overflow, the overflow of the div is clipped, and the rest of the content will be invisible, I set it to use hidden, you can also use auto, but auto adds scrollbars only when necessary
a {
background: tan;
float: left;
clear: left;
}
div {
width: 100px;
height: 200px;
background: green;
overflow: hidden;
}
Link 1
This is link 2.
3rd
This is a long string for testing
<div></div>
Flexbox seems to be a good approach. Wrap all the links (anchor tags) in a div element and then wrap that div along with the other div you want to be side by side in another div. See below code example:
CSS
.parentDiv {
display: flex;
}
.links {
display: flex;
flex-direction: column;
}
a {
background: tan;
}
.otherDiv {
width: 100px;
height: 200px;
background: green;
}
HTML
<div class="parentDiv">
<div class="links">
Link 1
This is link 2.
3rd
</div>
<div class="otherDiv"></div>
</div>
As a fan of using flexbox, I came up with this approach
HTML
<div class="parent">
<div>
Link 1
This is link 2.
3rd
</div>
<div></div>
</div>
CSS
a {
background: tan;
}
.parent {
display: flex;
}
.parent div:first-child {
display: flex;
flex-direction: column;
margin-right: 20px;
}
.parent div:first-child a {
margin-bottom: 10px;
}
.parent div:last-child {
width: 100px;
height: 200px;
background: green;
}
Just wrapper your content with one parent class with Flex property and it's done. It will solve your problem.
Refer to below snippet code
.parent {
display: flex;
}
a {
background: tan;
}
.otherclass {
width: 100px;
height: auto;
background: green;
flex: 0 0 1;
}
<div class="parent">
<ul>
<li>
Link 1</li>
<li>
This is link 2.</li>
<li>
3rd</li>
<li>
Link 1</li>
<li>
This is link 2.</li>
<li>
3rd</li>
</ul>
<div class='otherclass'></div>
</div>
I am trying to center my tabs content vertically, but when I add the CSS style display:inline-flex, the horizontal text-align disappears.
How can I make both text alignments x and y for each of my tabs?
* { box-sizing: border-box; }
#leftFrame {
background-color: green;
position: absolute;
left: 0;
right: 60%;
top: 0;
bottom: 0;
}
#leftFrame #tabs {
background-color: red;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 25%;
}
#leftFrame #tabs div {
border: 2px solid black;
position: static;
float: left;
width: 50%;
height: 100%;
text-align: center;
display: inline-flex;
align-items: center;
}
<div id=leftFrame>
<div id=tabs>
<div>first</div>
<div>second</div>
</div>
</div>
Approach 1 - transform translateX/translateY:
Example Here / Full Screen Example
In supported browsers (most of them), you can use top: 50%/left: 50% in combination with translateX(-50%) translateY(-50%) to dynamically vertically/horizontally center the element.
.container {
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
<div class="container">
<span>I'm vertically/horizontally centered!</span>
</div>
Approach 2 - Flexbox method:
Example Here / Full Screen Example
In supported browsers, set the display of the targeted element to flex and use align-items: center for vertical centering and justify-content: center for horizontal centering. Just don't forget to add vendor prefixes for additional browser support (see example). Remember the parent container will also need height (in this case, 100%).
html, body, .container {
height: 100%;
}
.container {
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: center;
}
<div class="container">
<span>I'm vertically/horizontally centered!</span>
</div>
Approach 3 - table-cell/vertical-align: middle:
Example Here / Full Screen Example
In some cases, you will need to ensure that the html/body element's height is set to 100%.
For vertical alignment, set the parent element's width/height to 100% and add display: table. Then for the child element, change the display to table-cell and add vertical-align: middle.
For horizontal centering, you could either add text-align: center to center the text and any other inline children elements. Alternatively, you could use margin: 0 auto, assuming the element is block level.
html, body {
height: 100%;
}
.parent {
width: 100%;
height: 100%;
display: table;
text-align: center;
}
.parent > .child {
display: table-cell;
vertical-align: middle;
}
<section class="parent">
<div class="child">I'm vertically/horizontally centered!</div>
</section>
Approach 4 - Absolutely positioned 50% from the top with displacement:
Example Here / Full Screen Example
This approach assumes that the text has a known height - in this instance, 18px. Just absolutely position the element 50% from the top, relative to the parent element. Use a negative margin-top value that is half of the element's known height, in this case - -9px.
html, body, .container {
height: 100%;
}
.container {
position: relative;
text-align: center;
}
.container > p {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin-top: -9px;
}
<div class="container">
<p>I'm vertically/horizontally centered!</p>
</div>
Approach 5 - The line-height method (Least flexible - not suggested):
Example Here
In some cases, the parent element will have a fixed height. For vertical centering, all you have to do is set a line-height value on the child element equal to the fixed height of the parent element.
Though this solution will work in some cases, it's worth noting that it won't work when there are multiple lines of text - like this.
.parent {
height: 200px;
width: 400px;
background: lightgray;
text-align: center;
}
.parent > .child {
line-height: 200px;
}
<div class="parent">
<span class="child">I'm vertically/horizontally centered!</span>
</div>
If CSS3 is an option (or you have a fallback) you can use transform:
.center {
right: 50%;
bottom: 50%;
transform: translate(50%,50%);
position: absolute;
}
Unlike the first approach above, you don't want to use left:50% with the negative translation because there's an overflow bug in IE9+. Utilize a positive right value and you won't see horizontal scrollbars.
Here is how to use two simple flexbox properties to center n divs on the two axes:
Set the height of your container: Here the body is set to be at least 100 viewport height.
align-items: center; will center the blocks vertically if flex direction is row else horizontally if flex direction is column
justify-content: space-around; will distribute the free space vertically if flex direction is row else horizontally if flex direction is column around the div elements
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: space-around;
}
<div>foo</div>
<div>bar</div>
The best way to center a box both vertically and horizontally, is to use two containers :
The outher container :
should have display: table;
The inner container :
should have display: table-cell;
should have vertical-align: middle;
should have text-align: center;
The content box :
should have display: inline-block;
should adjust the horizontal text-alignment, unless you want text to be centered
Demo :
body {
margin : 0;
}
.outer-container {
display: table;
width: 80%;
height: 120px;
background: #ccc;
}
.inner-container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered-content {
display: inline-block;
text-align: left;
background: #fff;
padding : 20px;
border : 1px solid #000;
}
<div class="outer-container">
<div class="inner-container">
<div class="centered-content">
Center this!
</div>
</div>
</div>
See also this Fiddle!
Centering in the middle of the page:
To center your content in the middle of your page, add the following to your outer container :
position : absolute;
width: 100%;
height: 100%;
Here's a demo for that :
body {
margin : 0;
}
.outer-container {
position : absolute;
display: table;
width: 100%;
height: 100%;
background: #ccc;
}
.inner-container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered-content {
display: inline-block;
text-align: left;
background: #fff;
padding : 20px;
border : 1px solid #000;
}
<div class="outer-container">
<div class="inner-container">
<div class="centered-content">
Center this!
</div>
</div>
</div>
See also this Fiddle!
CSS Grid: place-items
Finally, we have place-items: center for CSS Grid to make it easier.
HTML
<div class="parent">
<div class="to-center"></div>
</div>
CSS
.parent {
display: grid;
place-items: center;
}
Output:
html,
body {
height: 100%;
}
.container {
display: grid;
place-items: center;
height: 100%;
}
.center {
background: #5F85DB;
color: #fff;
font-weight: bold;
font-family: Tahoma;
padding: 10px;
}
<div class="container">
<div class="center" contenteditable>I am always super centered within my parent</div>
</div>
Run this code snippet and see a vertically and horizontally aligned div.
html,
body,
.container {
height: 100%;
width: 100%;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
.mydiv {
width: 80px;
}
<div class="container">
<div class="mydiv">h & v aligned</div>
</div>
.align {
display: flex;
width: 400px;
height: 400px;
border: solid 1px black;
align-items: center;
justify-content: space-around;
}
.align div:first-child {
width: 20px;
height: 20px;
background-color: red;
position: absolute;
}
.align div {
width: 20px;
height: 20px;
background-color: blue;
}
<div class='align'>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
First child will be aligned vertically and horizontally at center
Source Link
Method 1) Display type flex
.child-element{
display: flex;
justify-content: center;
align-items: center;
}
Method 2) 2D Transform
.child-element {
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
position: absolute;
}
See other methods here
to center the Div in a page check the fiddle link
#vh {
border-radius: 15px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
padding: 25px;
width: 200px;
height: 200px;
background: white;
text-align: center;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
<div id="vh">Div to be aligned vertically</div>
Update
Another option is to use flex box check the fiddle link
.vh {
background-color: #ddd;
height: 200px;
align-items: center;
display: flex;
}
.vh > div {
width: 100%;
text-align: center;
vertical-align: middle;
}
<div class="vh">
<div>Div to be aligned vertically</div>
</div>
Below is the Flex-box approach to get desired result
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Flex-box approach</title>
<style>
.tabs{
display: -webkit-flex;
display: flex;
width: 500px;
height: 250px;
background-color: grey;
margin: 0 auto;
}
.f{
width: 200px;
height: 200px;
margin: 20px;
background-color: yellow;
margin: 0 auto;
display: inline; /*for vertically aligning */
top: 9%; /*for vertically aligning */
position: relative; /*for vertically aligning */
}
</style>
</head>
<body>
<div class="tabs">
<div class="f">first</div>
<div class="f">second</div>
</div>
</body>
</html>
Another approach is to use table:
<div style="border:2px solid #8AC007; height:200px; width:200px;">
<table style="width:100%; height:100%">
<tr style="height:100%">
<td style="height:100%; text-align:center">hello, multiple lines here, this is super long, and that is awesome, dude</td>
</tr>
</table>
</div>
Grid css approach
#wrapper {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
}
.main {
background-color: #444;
}
<div id="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box main"></div>
</div>
Need to follow following New and easy solution:
.centered-class {
align-items: center;
display: flex;
justify-content: center;
width: 100vw;
height: 100vh;
}
<div class="centered-class">
I'm in center vertically and horizontally.
</div>
The simplest and cleanest solution for me is using the CSS3 property "transform":
.container {
position: relative;
}
.container a {
position: absolute;
top: 50%;
transform: translate(0,-50%);
}
<div class="container">
Hello world!
</div>
In order to vertically and horizontally center an element we can also use below mentioned properties.
This CSS property aligns-items vertically and accepts the following values:
flex-start: Items align to the top of the container.
flex-end: Items align to the bottom of the container.
center: Items align at the vertical center of the container.
baseline: Items display at the baseline of the container.
stretch: Items are stretched to fit the container.
This CSS property justify-content , which aligns items horizontally and accepts the following values:
flex-start: Items align to the left side of the container.
flex-end: Items align to the right side of the container.
center: Items align at the center of the container.
space-between: Items display with equal spacing between them.
space-around: Items display with equal spacing around them.
Just make top,bottom, left and right to 0.
<html>
<head>
<style>
<div>
{
position: absolute;
margin: auto;
background-color: lightblue;
width: 100px;
height :100px;
padding: 25px;
top :0;
right :0;
bottom:0;
left:0;
}
</style>
</head>
<body>
<div> I am in the middle</div>
</body>
</html>
You can achieve this using CSS (your element display:inline-grid + grid-auto-flow: row; ) Grid and Flex Box ( parent element display:flex;),
See below snippet
#leftFrame {
display: flex;
height: 100vh;
width: 100%;
}
#tabs {
display: inline-grid;
grid-auto-flow: row;
grid-gap: 24px;
justify-items: center;
margin: auto;
}
html,body {
margin:0;
padding:0;
}
<div>
<div id=leftFrame>
<div id=tabs>
<div>first</div>
<div>second</div>
</div>
</div>
</div>
This should works
.center-div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
}
<div class="center-div">Center Div</div>
If you prefer it without flexbox, grid, table or vertical-align: middle;
You can do:
HTML
<div class="box">
<h2 class="box__label">square</h2>
</div>
CSS
.box {
box-sizing: border-box;
width: 100px;
height: 100px;
text-align: center;
border: 1px solid black;
}
.box__label {
box-sizing: border-box;
display: inline-block;
transform: translateY(50%);
text-align: center;
border: 1px solid black;
}
If it's only about text aligning it's simple. Just use this:
vertical-align: middle; /* vertical centering*/
text-align: center; /* horizontal centering*/
Parent styling is not needed.
In some cases when the parent has some style properties it may affect the child, where this will not work properly.
Approach 6
/*Change units to "%", "px" or whatever*/
#wrapper{
width: 50%;
height: 70vh;
background: rgba(0,0,0,.5);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
#left{
width: 50%;
height: 50vh;
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
background: red;
}
#right{
width: 50%;
height: 50vh;
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin: auto;
background: green;
}
.txt{
text-align: center;
line-height: 50vh;
}
<div id="wrapper">
<div id="left" class="txt">Left</div>
<div id="right" class="txt">Right</div>
</div>
.container{
width: 50%; //Your container width here
height: 50%; //Your container height here
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
The easiest way of centering a div both vertically and horizontally is as follows:
<div style="display: table; width: 200px; height: 200px; border: 1px solid black;">
<div style="display: table-cell; vertical-align: middle; text-align: center;">
Text Here
</div>
</div>
One More Example:
.parent {
display: table;
width: 100%;
height: 100%;
}
.child {
display: table-cell;
vertical-align: middle;
text-align: center;
}
<div class="parent">
<div class="child">
<h4><u>SERVICE IN BANGLADESH FLEET RESERVE <br> AND <br> RE-ENGAGEMENT ORDER FOR DEFENCE SERVICE</u></h4>
</div>
</div>
I see this the shortest and easiest way. However it depends on the element width and height. So feel free to adjust more the percentages on translate(50%, 50%);.
.divContainer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transform: translate(50%, 50%);
}
<div class="divContainer">I am centered</div>
The simplest flexbox approach:
The easiest way how to center a single element vertically and horizontally is to make it a flex item and set its margin to auto:
If you apply auto margins to a flex item, that item will automatically
extend its specified margin to occupy the extra space in the flex
container...
.flex-container {
height: 150px;
display: flex;
}
.flex-item {
margin: auto;
}
<div class="flex-container">
<div class="flex-item">
This should be centered!
</div>
</div>
This extension of margins in each direction will push the element exactly to the middle of its container.
In the case where I was trying to vertically align text content inside button::before and button::after, I was able to get it working using vertical-align: text-top.
button::after {
vertical-align: text-top;
}
I use this CSS code:
display: grid;
justify-content: center;
align-items: center;
The source is CSS-Tricks
This is a related problem that people might come to this page when searching: When I want to centre a div for a "waiting.." 100px square animated gif, I use:
.centreDiv {
position: absolute;
top: -moz-calc(50vh - 50px);
top: -webkit-calc(50vh - 50px);
top: calc(50vh - 50px);
left: -moz-calc(50vw - 50px);
left: -webkit-calc(50vw - 50px);
left: calc(50vw - 50px);
z-index: 1000; /* whatever is required */
}
This question already has answers here:
HTML5 flexible box model height calculation
(2 answers)
Closed 4 years ago.
I have a container flex with content flexes. How do i make content flex occupy full width and height of container flex.
<div id="main">
<div id="main-nav">
</div>
<div class="container">
<div class="content"></div>
<div class="content"></div>
</div>
</div>
#main{
display: flex;
flex-direction: column;
height: 100vh;
width: 100vw;
}
#main-nav{
width: 100%
height: 50px;
}
.container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex: 1;
}
.content{
display: flex;
width: 100%;
height: 100%;
}
The above code makes content to occupy 100% width of container but height is based on the text within the content. I tried the solutions mentioned from similar questions but had no luck and it was still the same.
Basically, I want each of the content to occupy the same height as occupied by the container in the viewport height. I also tried jQuery,
var rht = $("#container").height();
$(".content").height(rht);
It changes the height properly but adds a horizontal scroll bar with increase in width.
After several updates to the original question:
* {
box-sizing: borderbox;
margin: 0;
padding: 0;
}
#main {
display: flex;
flex-direction: column;
border: 1px solid red;
min-height: 100vh;
}
#main-nav {
flex: 0 0 50px;
}
.container {
display: flex;
flex-direction: column;
flex: 1;
border: 1px solid green;
}
.content {
flex: 1;
border: 1px solid orange;
}
<div id="main">
<div id="main-nav"></div>
<div class="container">
<div class="content"></div>
<div class="content"></div>
</div>
</div>
JSfiddle Demo
You cannot set width or height of flex's child is bigger (size of flex)/(number of flex's childs) but you can add position: absolute into .content and position: relative into .container then set width and height for .content. First .content is under second .content, you can use propety z-index or display: none to control.
* {
box-sizing: borderbox;
margin: 0;
padding: 0;
}
#main {
display: flex;
flex-direction: column;
background: red;
min-height: 100vh;
}
#main-nav {
flex: 0 0 50px;
}
.container {
position: relative;
display: flex;
flex: 1;
background: green;
}
.content {
position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 100%;
flex: 1;
background: orange;
}
<div id="main">
<div id="main-nav"></div>
<div class="container">
<div class="content">left</div>
<div class="content">right</div>
</div>
</div>