Skip to main content

Two cool ways to center content in CSS

You may have seen this question, center a div, or whatever, in interviews or other places. I am sure there are other approaches than I am sharing here, but I found these two cool ideas from multiple places (see refs at the end). These are not my original ideas so I will be sure to share where I learned these from:

 

Using display:flex

 Make sure you know how flex works, but to do centering with flex, it's ridiculously simple:

div.container {
display: flex;
justify-content: center; /* horizontal alignment */
align-items: center; /* vertical alignment */
flex-direction: column; /* since we are doing a vertical column */
padding: 1rem 3rem; /* not related to centering */
}

 Now everything inside <div class="container"> </div> will be centered in both directions!


Using display:grid 

You are so going to thank for me this one, you are welcome. This one is so simple it does not even need an explanation does it?

 
div.container {
display: grid;
place-items: center;
padding: 1rem 3rem;
} 


Try it out in CodePen, Codesandbox or whatever tool you use to do your CSS/JS stuff!

Where I learned these from:

[1] A wonderful compilation of one liner CSS tricks! https://web.dev/one-line-layouts/

[2] The wonderful book CSS in Depth By Keith J. Grant. It's wonderful to read CSS from a book, for a change.

Labels:

Comments

Post a Comment

Popular posts from this blog

Using Sublime Text build system to open your files in your favorite Mac app

A quick hack on Sublime text when working on Macs is to get the editor to invoke the 'open' command so that you can hit command+B to 'open' the file in your favorite app. My favorite use for it is when editing html files, i want it to open in my favorite browser. On a Mac, 'open' is the equivalent of the default file association in Windows, such as when you click on a text file, you can have it open in your favorite editor. In sublime, go to Tools > Build System Select New build system In the file that opens type this in into the pre-filled section and save the file with a name you want, such as 'open.sublime-build': { "cmd": ["open", "$file"] } Then go back to the file you were editing, Tools > Build System. Now select your newly saved build system. Now every time you hit command + B you get the file to open on Chrome (which is what my Mac is setup by default to open html files with)! Obvi...
Post a Comment
Read more

How to use function closure to capture common arguments in python

Sometimes you need a function that already 'captures' some information you don't want to repeat when calling it. For example, logging may require you to pass in a lot of contextual information for each call. Instead you can capture the common/unchanging contextual information in a function (using its clsoosure) then call the resulting function with less args (only those that are changing in each call site)   class AClass:   def __init__(self):     self.make_log_msg = lambda m: f"a={self.a}, b={self.b}, message={m}"  def do_something(self):     doStuff();     logger.info(self.make_log_msg('test message')) In the absence of the make_log_msg() function you would need to pass all of a,b,c into every logging function call as in self.make_log_msg(self.a, self.b, message) .  This is possible because make_log_msg returns a function (lambda function in this case) that already captures the values self.a and self.b in its closure at the t...
Post a Comment
Read more