Solve common problems in CSS

How to center everything vertically?

Talking about the center, there are quite a few tips to do this. One of them can be found at https://www.sitepoint.com/atoz-css-quick-tip-float-and-clear/ but it is horizontally.

Some people with vertical center are something very difficult. But this tip will make it easier to handle it without spending too much CSS and working on every element, even if you don't care about the size of the screen or the width and width of the screen. more cards.

I have a code below.

To center the absolute .modal tag, we need to use the position attribute. The surrounding .container tag will be your entire browser frame and the .modal tag inside is absolute by the .container tag

Then we need to return the .modal tag to the middle position of the .container tag.

If we know the width and height of the .modal tag, it is too ez. You can use margin, padding … to be able to bring the center effect. It's really simple.

But what if the modal is resizable? So the above attributes are not working.

So we need to use the translate attribute to do this.

So you can center vertically 1 card without caring about the length and size of the card.

You can see the code here

How can we solve a vendor prefix problem?

You may have noticed that in the above example, I did not use any vendor prefix for the example. There are 2 reasons:

1 is to give the example code simple, easy to understand and partly to never vendor prefix.

Not because I'm not interested in the browsers that people use, nor am I a lazy or ignorant dev (maybe a little bit). I still regularly check the properties I use on caniuse.com . You can also use it to check what browsers you will write to support.

Back to the problem of vendor prefix handling, I recommend using a CSS preprocessor like LESS or Sass. They will help us vendor prefix to be suitable for browsers that even I don't see it anywhere. Just one option is the CSS section that will generate.

Of course if you do not want to use LESS, Sass or … to write, you can use the website https://autoprefixer.github.io/ it will help you a lot.

Join the largest Web programming community in Vietnam: Vietnamwebsummit.com

My CSS is not running, someone helps me?

To answer this question is really hard, I can't sit next to you and see what you are writing at least to see the whole thing you write so that you can find the cause but I can help you a bit. Try referring to my debugging process.

• Check if the related file is saved or not?
• Check the browser hightlight and see if there are errors there?
• Check whether missing quotes, parentheses or semicolons
• Make sure the file you are editing is what you look at in the browser
• Ensure any path is correct (for CSS files, images or anything else). You can check if all your external files have been properly loaded in Network, Source or Console tab in browser development tools (like Google dev tools).
• Checking the class and div ensures that all names are spelled correctly.
• Inspect element ensures that all CSS properties have been spelled correctly (in Chrome, any invalid attributes or values ​​will be marked with an orange warning icon in the view properties of card).

Chances are, all your mistakes have been exposed. If the problem is not resolved, copy your code on Codepen or JSfiddle so they can help you.

ITZone via Techmaster