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://codecolorz.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://codecolorz.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.