How to center elements with CSS

Naveen Kharwar — Sun, 26 Apr 2020 02:28:27 +0000

If you just dived into web development I am sure that you are also suffering from this.

There are tons of questions on the developer's forum like StackOverflow where people answered these questions nicely that how they center their elements but you will find that most of them don't explain why their method works and why some time that don't.

I am here just summarize all possible ways to center an element and also let you know why and where to use them.

1. Center using margin

The easiest way to center an element is margin: 0 auto; what this means that we are setting top-bottom margin 0 and left-right to auto.
Below snippet will clear the above statement.


.container {
    margin: 0 auto;
    width: 700px;
}

/* That means */

.container {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    width: 700px;
}

The best thing about this method is that we don't need any parent element to trigger this style. Good to use when you are creating a container or wrapper.
so, here comes the restriction this method only works if we provide width to that element.
Because we are providing left and right margin auto hence we need to give it a specific width so that browser can provide left-right margin to it.

2. Center using text-align

If you have content inside a parent element and you just want to center that, then this method will be good. In sort text-align: center; works as it is written means works only with text or image or anything inside that parent component. It won't center that element it center the content inside that element.

You need to have a parent element to use this method.


.i-am-text {
     text-align: center;
}

3. Center using grid and flexbox

This method requires you to have knowledge of the grid or flexbox, this is an advanced method. Flexbox and grid make centering elements easy and handier.

with flexbox or grid, centering elements horizontal and vertical is also handy.

Let me provide some examples.

4. Center using position

The CSS position property is amazing if you know how to use them. CSS Position absolute property is widely used when we want to animate an SVG on a webpage at any place or just want to place elements anywhere on the page.
But with great powers comes great responsibility :p with position absolute the element will leave its flow from the page I mean it will be no more inside the container, The element is no more in the flow we can manage to put it anywhere, but also it will make problem in responsive you have to add media queries for appropriate screen sizes.

.wrap {
  background-color: #FF4136;
  width: 300px;
  height: 300px;
  /* magic begins more here */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

Let's start with the position I put the position absolute now we have full control over wrap element and put left:50% left 50% will move the element exactly at the center of the main container where this element belongs! and top:50% top:50%, the div will be pushed down 50% from the top and now we using transform: translate(-50%, -50%); now this box is absolutely centered vertically within its container using translate(-50%,-50%) and we have a center div, center horizontal and vertical.

feedbacks and suggestions are always welcome 🤗

Links you should check

My other blogs

Scope of TailwindCSS

Scope of TailwindCSS

Naveen Kharwar — Sat, 04 Apr 2020 11:13:59 +0000

Hello everyone, I am Naveen Kharwar. I am a student as well as a programmer by passion. Being in quarantine I've got a lot of time so instead of wasting it in boredom, I decided to invest it in brushing up my blogging skills. Hence, I decided to write this blog.

So, I am writing this blog about my experience with TailwindCSS.

According to the offical website, TailwindCSS is a utility-first CSS framework for rapidly building custom designs. Some developers don't like it because it makes the HTML/JSX or any markup look busier. But I found it cool as I don't have to write any single CSS for a website it doesn't matter if it's a big as E-commerce or just a simple landing page.

TailwindCSS is available as CDN as well as the NPM module. To take full advantage of Tailwind’s features I recommend you install it with NPM. Check more about the installation here.

With TailwindCSS you have full control over your component not like Bootstrap. You will not get ready-made styles classes you have to create your own.

Let me show you an example of a button:

Wait a minute! WTH, I have to write that many classes for just a button but...but...but...let me explain why is this helpful.

1. Customization

TailwindCSS comes with default design but with the use of its config file tailwind.config.js you can customize everything from the size of the container to color, font, font size, etc.

2. Size

We are in 2020 we are now more focused on performance rather than CSS Framework look at the size of the Bootstrap Gzip file is around 22.7kb 😲 just a CSS framework, and after that, you write your CSS o meet your website look same as design.
and in TailwindCSS we use PurgeCSS, what PurgeCSS do is it scan your HTML and remove the CSS which are not being used after PurgeCss the tailwind CSS file generated is around 10kb to 15kb except if you are adding your CSS

3. Responsive

No need to write media queries for responsive design, Yep Yep with TailWindCSS you don't need to write any media queries to meet responsiveness you can achieve this by prefix the utility with the break-point name, followed by a semicolon same goes with hover state.

4. I hate naming things

With TailwindCSS you don't need to worry about naming your CSS classes no naming. with the TailwindCSS Utility class mostly you don't need to write any name unless you are not writing your custom style.
about 98% you don't need to write CSS.

5. Increase development

When you are not writing CSS it directly increases your productivity you can have more focus on your development rather than writing a name like .i-dont-like-naming-css.

Conclusion

That's all I have experienced the TailwindCSS if these benefits seem interesting to you you should give TailwindCSS a try.
I'll provide some link here that will help you with TailwindCSS :)

Let me know what you feel about TailwindCSS in the comment. I like to know what others feel about Tailwind CSS
Well, this is the first blog of mine I'll continue writing about my learning here 😃

Thank You, Akshat Gupta, for the cover image.
Check his designs Akshat Gupta on Behance
Adding to this I like to thank my two friends who helped me in writing my first blog Aditya Vikram Singh and Sneha Omer.

DEV Community: Naveen Kharwar