Being a front end developer is sometimes an odd place to find yourself.

Your work is translating a designer’s designs into HTML and CSS, sometimes JavaScript too. In the best-case scenario, requests are easy to implement because you have a good PSD file and a good relationship with the designer. But anyone who has ever worked with CSS and HTML knows that sometimes one simple request can open a pandora’s box of possibilities.

It might even seem like a pretty simple request. Maybe the designer says, “We want to center that text in the middle of the screen.”

Why does something so simple and easy to do in Photoshop, (you just have to click in a button) open up a world of possibilities and decisions for us, the developers?

Have you ever counted how many ways there are to center a line of text in the middle of a box, a button, the screen or whatever it was around?

*Spoiler Alert*

I counted at least eight of them and all of them are valid.

Things you should have in mind when you code with HTML and CSS


The content will be displayed on many devices, all with different sizes and resolutions.

Learn about W3.CSS Built-In Responsiveness.

Work smarter, work less

Try to think about coding in components. Try to isolate the content in each component so you can reuse them on different pages.

Grids and Frameworks

Working with grid systems like Bootstrap will help you to avoid reinventing the wheel.

Read about how to build fast, responsive sites with Bootstrap.

Know the basics

If you are just starting with CSS and HTML you will find that now almost anything is possible. But if you don’t know the difference between display: inline; and display: block;, for example, then you have to go back to the basics.

Learn about the display property.

Semantics before Aesthetic

Your site should resist when you remove the CSS. If you did the things right, the information should be organized and nested properly. Read about all the HTML tags and the utility of each one.

Returning to the first request: “We want to center that text in the middle of the screen.”

Centering a text horizontally is the easy thing, ‘text-align: center;’ would be enough. But let’s say they asked you to center it in a vertical direction inside a red box. Now this is where things get interesting.

There are a few possibilities and properties you should think about when to decide which route you will take to solve the problem:

  • Spacing: padding, margin, etc.
  • Positioning: absolute, relative, fixed, static, etc.
  • Sizing: width and height.
  • Displaying: block, inline, flex, etc.

Here are the solutions I found. They are for sure just some of the possible solutions.

The next time you find yourself battling with something that in theory is easy peasy, remember this article and know that one easy request could be opening the Pandora’s box of development.


About the Author

Today’s post was written by 729 Solution’s Front End Developer, Bruno Waldbaum. Learn more about Bruno and the rest of the 729 Solutions team, and reach out to tell us about your project!


Let’s chat!

Tell Us About Your Project


Check out these other blog posts!


No Silver Bullet: Creating an Experimental Devops Culture

Common Developer Acronyms: Part 2