There are many ways to align something in the center. Let’s discuss all the CSS properties and techniques to align “something” in the center. This “Something” can be a text, an image, multiple div elements, a container element, or in general any element.
Dependencies
To align some element inside another element, will always require a minimum or fixed-width value. To align the item vertically, the parent element - the immediate parent element must have a height. Similarly to align horizontally, a parent item must have a minimum width applied to it.
Most of the CSS display properties will enable block-level width. So it is easy to align something horizontally because the block makes width 100% or available space. Aligning something center vertically is more challenging to debug because old properties do not make the element span full height automatically.
Lets create one structure and use different techniques to center align the child element. The structure looks like this:
<div class="my-world">
<img alt="mom" class="mom" src="http://imjignesh.com/img/placeholder/mom-typo.png"/>
</div>This simple example uses a container called "my-world" and a child called "mom" as an example. Let's say we want ".mom" to be in the center of ".my-world".
The "my-world" class will need to have a width and a height to be able to have some spacing for alignment.
So class will look like this:
.my-world{
background:url(http://imjignesh.com/img/placeholder/my-world.png) center center/100%;
width:100%;
height:100%;
}We can use different techniques on the parent and child to align it in the center.
For simplicity, I'll just mention the code that is important for centering.
Flexbox
.my-world{
display:flex;
align-items:center;
justify-content:center;
}
.mom{
width:200px;
filter:drop-shadow(0 0 5px);
display:block;
}Just by applying align-items and justify-content property, the image moves to the center.
This technique is applicable for flex property globally. We can align text, images, multiple lists, and containers inside the child container. The point to note here is there should be only one child in this setup.
If we're using flex in row mode,
Left Alignment:
.my-world{
justify-content:flex-start;
}Right Alignment:
.my-world{
justify-content:flex-end;
}Top Alignment:
.my-world{
align-items:flex-start;
}Bottom alignment:
.my-world{
align-items:flex-end;
}Centering with Flex Child:
If we have a single child within a flexbox, we can just use margin property to align center.
.mom{
/* Works with flex parent*/
margin: auto auto;
}Table
body {
display: table;
height: 100%;
width: 100%;
}
.my-world{
display: table-cell;
text-align: center;
vertical-align: middle;
height: 100%;
width: 100%;
}
.mom{
width:200px;
filter:drop-shadow(0 0 5px);
}We require the additional property to make table-data work. so we'll use the body to display the table and my-world as table-data. table-data will allow us to use table cell properties to make anything center.
If we're using table-data,
Left Alignment:
.my-world{
text-align: left;
}Right Alignment:
.my-world{
text-align: right;
}Top Alignment:
.my-world{
vertical-align: top;
}Bottom alignment:
.my-world{
vertical-align: bottom;
}Transform
.my-world {
width: 100%;
height: 100%;
position: relative;
}
.mom {
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)
}The transforming technique will not be super helpful but it will work for some cases where the image is so small and we want to align it in the center.
If we're using flex in row mode,
Left Alignment:
.my-world{
left: 0%;
transform: translate(0%, -50%);
}Right Alignment:
.my-world{
left: 100%;
transform: translate(-100%, -50%);
}Top Alignment:
.my-world{
top: 0%;
transform: translate(-50%, 0%);
}Bottom alignment:
.my-world{
top: 100%;
transform: translate(-50%,-100%);
}Margin
.my-world {
width: 100%;
height: 100%;
position: relative;
}
.mom {
position: relative;
left: 50%;
top: 50%;
margin:-50px 0 0 -50px
}This negative margin technique works kind of the same as the transform technique. We have to specify half of the child dimension as a negative top and left value to put it in the center.
Any of these techniques can be used to center a single child element. You can contain as many children inside the single child to stay in that centered container.
In the above example, the single child contains a text element and an image. The same rules are applicable to the inner container as well. Centering in the child container can be done using any of the mentioned rules depending on use cases.
How to vertically align text inside a flexbox?
Use flexbox to vertically align some content inside a div. This depends on the way we’re using the flex-direction. Most of the time it’s a combination of two properties but only one property can make your content aligned in the center vertically.
Add HTML Code
Add a div to contain sample text.
<!DOCTYPE html>
<html lang="en">
<body>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia, ad? Perspiciatis recusandae excepturi eveniet ducimus culpa quas blanditiis labore in est itaque provident, voluptates deleniti autem dignissimos, id quis fugit.</div>
</body>
</html>Add CSS
We're setting height of HTML,BODY to 100% so we can have text centered vertically.
html,body{height:100%; margin:0;padding:0;}
div {
display: flex;
align-items:center;
width: 100%;
height: 100%;
font-size:4vw;
}
Please note in this example, We are using the Simple flex property.
The child element of the flex-box will be aligned in a row by default.
However, There can be another case with flex-directon:columnWhich will align items vertically. In this case, we have to use justify-content to align it vertically centered.
html,body{height:100%; margin:0;padding:0;}
div {
display: flex;
flex-direction:column;
justify-content:center;
width: 100%;
height: 100%;
font-size:4vw;
}