How to center a div vertically and horizontally in another div using #CSS.
This video is for those web #developers who are struggling to find out how to center a div vertically in another div, or if you're looking for some quick and easy ways on how to do it without too much fuss. In this video, I show you 10 different ways to center a div vertically in another. These are the best and easiest methods that work for any website layout.
Centering an element horizontally and vertically in CSS is a very common question among website developers. Imagine that you have two parent div elements, one surrounding the other with their child dIVs inside of them on your HTML/CSS page- how do we center both sets so they are all aligned? There are many ways to achieve this goal but here’s what I typically use:
Here are 10 easy ways to center a div vertically and horizontally:
First of all, create an HTML div element with container class and another div inside container div with a class named innerDiv. Then apply the following CSS code one by one to align content center inside container div:
CSS Source Code to Center a div inside a container div
.container {
position: relative;
}
.innerDiv {
position: absolute;;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
/*2. position Absolute with Calc function */
.container {
position: relative;
}
.innerDiv {
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
}
/* 3. Using position Absolute with Transform */
.container {
position: relative;
}
.innerDiv {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 4- Absolute + Margin Auto */
.container {
position: relative;
}.innerDiv {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
/* 5. Center a div center using text align */
.container {
line-height: 300px;
text-align: center;
font-size: 0px;
}
.innerDiv {
font-size: 16px;
display: inline-block;
vertical-align: middle;
line-height: initial;
}
/* 6. Center div center using Table */
.container {
text-align: center;
}
.innerDiv {
display: inline-block;
}
/* 7. Align div center using CSS-table */
.container {
display: table-cell;
text-align: center;
vertical-align: middle ;
}
.innerDiv {
display: inline-block;
}
/* 8. Using Flexbox css property */
.container {
display: flex;
justify-content: center;
align-items: center;
}
/* 9. How to align div center Using CSS Grid */
.container {
display: grid;
}
.innerDiv {
align-self: center;
justify-self: center;
}
/* 10. how to center a dive using writing-mode css property */
.container {
writing-mode: vertical-lr;
text-align: center;
}.middle {
writing-mode: horizontal-tb;
display: inline-block;
text-align: center;
width: 100%;
}.innerDiv {
display: inline-block;
margin: auto;
text-align: left;
}
center div horizontally and vertically,
css center horizontally,
how to align div in center,
flexbox center horizontally,
css div center horizontally,
If you found this video helpful please share the video and SUBSCRIBE to this youtube channel. Please share your thoughts and queries in the comments below!
Top comments (0)