This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 5 years ago.
I have div block with property flex CSS.
This block has 80% width and 50% height of display.
How to display this block in center by horizontal and vertical?
Flex alignment properties apply to the children of a flex container.
So if you have a div with display: flex, and you want to center this div, you make the parent a flex container. Then you can apply flex alignment properties to the div.
div {
display: flex;
width: 80%;
height: 50vh;
border: 1px solid black;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
<div></div>
Here's a more complete explanation: https://stackoverflow.com/a/33049198/3597276
Related
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 1 year ago.
CSS Code:
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 400px;
}
.box1 {
background-color: aliceblue;
height: 70%;
width: 70%;
}
I tried vertical-align to center in box1 and nothing happened either. My box with the current code has vertically centered text but not horizontally. Any tips?
You can nest flex containers. This means your box can also have the display: flex; property, plus justify-content: center; for horizontally centering. Also look into the "place-" property with which you can center things on both axes with one single line of CSS.
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 1 year ago.
I can get it to center vertically or horizontally but not both at the same time. This is the css code I have so far:
.my-flex{
display: flex;
height: 100%;
width: 100%
}
//other pieces of the the flexbox that i have before it that aren't relevent
.last-element{
flex-grow: 1 0 auto;
align-self: center;
justify-self:center;
}
I also tried having the my-flex also be jusify-content center and flex-start as well as align-items
.my-flex{
display: flex;
height: 100%;
width: 100%
}
//other pieces of the the flexbox that i have before it that aren't relevent
.last-element{
flex-grow: 1;
align-self: center;
justify-self:center;
text-align: center
}
This is what I got to work!
if <div class="my-flex"> is the parent div, then
.my-flex{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
How to center a button within a div?
(16 answers)
Closed 2 years ago.
I have an outer div with relative position, inside it I have a inner div with absolute position, because I want the inner div sticking to the bottom of the outer div (bottom: 0).
Now how to center align a button inside the inner div?
JSX:
<Card>
<CardTitle>{voucher.voucherTitle}</CardTitle>
<CardContent>{voucher.voucherDesc}</CardContent>
<CardFooter>
<RedeemBtn>{`Redeem`}</RedeemBtn>
</CardFooter>
</Card>
Styled components:
const Card = styled.div`
width: 312px;
max-width: 100%;
height: 200px;
box-sizing: border-box;
justify-content: center;
background-image: linear-gradient(#fff calc(100% - 50px),hsla(0,0%,93.3%,.4));
`
const CardFooter = styled.div`
position: absolute;
bottom: 0;
color: #e40000;
width: 100%;
align-content: center;
`
const RedeemBtn = styled.button`
margin: 0 auto;
`
Apply the following to the inner container (button's parent):
width: 100%;
display: flex;
justify-content: center;
This will make your inner container center its content and cover whole outer container width.
.card{
display: flex;
align-items: center;
justify-content: center;
height: 5.5em;
}
Here height will adjust your center code.
This question already has answers here:
How to place two divs next to each other? [duplicate]
(13 answers)
Closed 5 years ago.
I need to align an element to the center of the screen while having an element to the left of it.
I can achieve this with float left and setting the padding of the center element to match the width of the floated element. But, in this case I will not always know the width.
I do not know how better to explain this. Searchs have failed me.
You can use css flex to get the same flex Guide
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
.wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: 100%;
}
.box-1 {
padding: 2%;
background: tomato;
flex: 0 0 10%;
}
<div class="wrapper">
<div class="box-1">1</div>
<div class="box-1">2</div>
</div>
This question already has answers here:
Align an element to bottom with flexbox
(10 answers)
Closed 5 years ago.
I have 3 vertically centered divs in one flex container with flex-direction:column and I need to place 3rd div to the bottom of the container.
This is an explanation of what I want: https://jsfiddle.net/tom8p7be/
How can I make this?
You can add margin-top: auto on both first and last child divs. When you add margin-top: auto to last-child div it will push that div to end of parent but it will also push other two divs to top of the parent. That is why you also need to add margin-top: auto to first-child div, and that will position them in the center of space from top to last-child div.
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.container div {
margin: 5px;
padding: 5px 10px;
border: 1px solid;
}
.container > div:last-child,
.container > div:first-child{
margin-top: auto;
}
<div class="container">
<div>This div should be vertically centered</div>
<div>This one too</div>
<div>And this div shoud be placed at the bottom of the flex container</div>
</div>