This article is a part of our AtoZ CSS Series. You can find other entries to the series here. You can view the full transcript and screencast for its corresponding video about the letter Q, the quotes property, here.
本文是我们的AtoZ CSS系列的一部分。 您可以在此处找到该系列的其他条目。 您可以在此处查看完整的笔录和有关字母Q( quotes属性)的相应视频的截屏视频。
As a bonus bit of content in this article as a part of our AtoZ CSS Series, I’ve answered the most common questions I’ve received about CSS which I hope will be useful.
作为本文的重要内容，作为AtoZ CSS系列的一部分，我已经回答了我收到的有关CSS的最常见问题，希望对您有所帮助。
There is literally nothing else to say on the topic of CSS quotes, nor is there any other selector, property or value that starts with Q. So, in this week’s tips, I answer some common questions I get from my students, AtoZ supporters and fellow professionals.
关于CSS引号，实际上没有什么可说的，也没有任何其他以Q开头的选择器，属性或值。因此，在本周的技巧中，我回答了我的学生，AtoZ支持者和专业人员。
I get this one a lot. And I get this one in addition to the more general question of how to horizontally center things in CSS which I addressed in an earlier tip all about floats.
我得到很多。 除了更普通的问题，即如何使CSS中的内容水平居中(我在前面的技巧中针对浮点数已解决)之外，我还得到了这一点。
On the topic of vertical centering, some people will tell you it’s really difficult. But these days it doesn’t require much CSS and can be done on any element – even in a responsive project when you don’t know how wide or tall the container or the element to be centered is.
关于垂直居中的主题，有些人会告诉您这确实很困难。 但是如今，它不需要太多CSS，并且可以在任何元素上完成-即使在不知道容器或要居中的元素有多宽或高的响应式项目中也是如此。
Take the following HTML which marks up a simple .modal message box inside of a container:
采取以下HTML，在容器内部标记一个简单的.modal消息框：
<div class="modal"> <h2>Message title</h2> <p>Message text lorem ipsum dolor sit amet</p> </div>To absolutely center the .modal element we can combine absolute positioning with translate.
要使.modal元素绝对居中，我们可以将绝对定位与平移结合起来。
Step one is to put the top left corner of the box right in the center of the parent container – which we can do by offsetting its top and left edges by 50% of the height and 50% of the width of the parent container:
第一步是将框的左上角放在父容器的中心，我们可以通过将其顶部和左侧边缘偏移父容器的height 50％和width的50％来做到这一点：
.container {position: relative; width: 100vw; height: 100vh;} .modal {position: absolute; top: 50%; left: 50%;}Step two is to bring the element back into the absolute center of the container. We need to move it back by half of its width and up by half of its height.
第二步是将元素放回容器的绝对中心。 我们需要将其向后移动一半的width然后向上移动一半的height 。
If we know the dimensions of the .modal we can achieve this with some negative margin and divide the width or height by 2 to get the required value. But if the .modal is likely to change size (due to being sized with percentages for example) this won’t work.
如果我们知道.modal的尺寸，则可以以一定的负margin实现，并将width或height除以2得到所需的值。 但是，如果.modal可能会更改大小(例如，由于使用百分比进行大小调整)，则此方法将无效。
Instead, using a translate transformation, we can move the element by a percentage of its existing size.
相反，使用平移转换，我们可以将元素移动其现有大小的一定百分比。
.modal {position: absolute; top: 50%; left: 50%;} /* back by half its width, up by half its height */ transform: translate(-50%, -50%);And there you have it, the element is perfectly centered even with a variable size.
有了它，即使尺寸可变，元素也可以完美居中。
You may have noticed in the first tip about vertical centering that I used a transform without adding the vendor prefixes. This is for two reasons. Firstly, it makes tutorial code easier to read and type and secondly for one little secret: I don’t write any vendor prefixes anymore.
您可能已经在关于垂直居中的第一篇文章中注意到了，我使用了一个转换而没有添加供应商前缀。 这有两个原因。 首先，它使教程代码更易于阅读和键入，其次，这是一个小秘密：我不再写任何供应商前缀。
I still occasionally find myself at the excellent caniuse.com to check on browser support for various properties and features but these days I don’t write any prefixes in my code.
我仍然偶尔会在优秀的caniuse.com上找到自己，以检查浏览器对各种属性和功能的支持，但是如今 ，我没有在代码中编写任何前缀。
This is not because I don’t care about users of browsers other than the one I develop in. And it’s not because I’m lazy and a bad developer. I don’t write vendor prefixes because I have an automated task that adds them for me, so I never have to think about them again.
这不是因为我不关心开发者以外的浏览器用户，也不是因为我懒惰并且是一个糟糕的开发人员。 我不写供应商前缀，因为我有一个自动任务为我添加了前缀，因此我不必再考虑它们。
I’d highly recommend using a pre-processor to write your CSS (I use Sass but have also used all the others to try them out) and I’d recommend adding Autoprefixer to your process too. Autoprefixer is a plugin for PostCSS which automatically adds the necessary prefixes to your compiled CSS based on the data from caniuse.com.
我强烈建议您使用预处理器来编写CSS(我使用Sass，但也使用所有其他工具进行了尝试)，并且建议您将Autoprefixer添加到您的进程中。 Autoprefixer是PostCSS插件基于从数据自动添加必要的前缀，以你的编译CSS caniuse.com 。
There are plugins available for all the popular task automators and I can’t recommend it highly enough!
有所有流行的任务自动化器可用的插件，我不能高度推荐它！
The short answer is, probably. But it’s always really hard to debug someone’s code remotely or based on a description of the problem. Instead, let me outline my process for debugging wonky CSS:
简短的答案可能是。 但是，始终很难远程或基于问题描述来调试某人的代码。 相反，让我概述一下调试不稳定CSS的过程：
Check the relevant files are saved 检查相关文件是否保存 Check the syntax highlighting in your editor and look for any inconsistencies 在编辑器中检查语法高亮显示，并查找任何不一致之处 Check for missing quotes, brackets or semi-colons 检查是否缺少引号，方括号或分号 Ensure the files I’m editing are what I’m looking at in the browser 确保我正在编辑的文件是我在浏览器中查看的文件 Ensure any paths are correct (for CSS files, images or anything else). You can check to see that all your external files have been loaded correctly in the Network, Sources or Console tabs in your developer tools 确保所有路径都是正确的(对于CSS文件，图像或其他任何文件)。 您可以在开发人员工具的“网络”，“源”或“控制台”选项卡中查看所有外部文件是否已正确加载。 Inspect element and ensure that all class names have been spelled correctly 检查元素并确保所有类名均已正确拼写 Inspect element and ensure that all CSS properties have been spelled correctly (in Chrome, any invalid properties or values will be marked with an orange alert icon in the elements view) 检查元素并确保所有CSS属性的拼写正确(在Chrome中，任何无效的属性或值都将在元素视图中用橙色警报图标标记) Inspect element and play around with values to see what changes 检查元素并尝试使用值以查看发生了什么变化 It’s likely that you’ll have caught the issue by now but if not, some deeper digging is needed 您可能现在已经发现了问题，但如果没有，则需要更深入地挖掘This may be a good point to ask for help either online or in person. If you do ask people for help, make sure you can send them a link to a Codepen or JSFiddle of your problem so they can see what you’re struggling with.
这可能是在线或亲自寻求帮助的好地方。 如果您确实向人们寻求帮助，请确保您可以向他们发送指向问题的Codepen或JSFiddle的链接，以便他们可以看到您所遇到的困难。
It took me a while to get on board with Grunt but eventually I did. To start with I didn’t really get what it was for but when I realized I could use it to launch a local server, compile my Sass, compress my JavaScript and alert me to any syntax errors while I type, I was convinced. It took me a while to get used to but I was happy.
我花了一段时间才加入Grunt，但最终我做到了。 首先，我并没有真正了解它的用途，但是当我意识到可以使用它来启动本地服务器，编译我的Sass，压缩我JavaScript并在键入时提醒我任何语法错误时，我深信不疑。 我花了一段时间才能习惯，但我很高兴。
When I heard about Gulp (which is a tool that does basically the same stuff but in a different way) I took the stance of “if it isn’t broken, don’t fix it.”
当我听说Gulp(该工具的功能基本相同，但使用的方式不同)时，我采取了“如果它没有损坏，请不要修复它”的立场。
But I was wrong.
但是我错了。
I recently worked on a client project as part of a team and they were already using Gulp so I used it too and wow, it’s fast! Compiling Sass used to take many seconds with Grunt but with Gulp we’re talking milliseconds.
我最近作为团队的一部分参与了一个客户项目，他们已经在使用Gulp，所以我也使用了它，哇，这太快了！ 使用Grunt编译Sass过去通常要花费很多秒，但是使用Gulp时，我们所说的是毫秒。
I’ve totally converted and until something better comes along, I’ll be sticking with Gulp.
我已经完全converted依了，直到更好的事情出现为止，我会坚持使用Gulp。
So I hope you found those questions and answers interesting or useful. If you have any further questions, please don’t hesitate to get in touch and let me know how I can help you.
因此，我希望您发现这些问题和答案有趣或有用。 如果您还有其他疑问，请随时与我们联系，让我知道如何为您提供帮助。
翻译自: https://www.sitepoint.com/atoz-css-quick-tip-css-problems/
相关资源：jdk-8u281-windows-x64.exe