AtoZ CSS快速提示：浮动，清除和居中元素
Buying a SitePoint Premium membership will give you access to the full AtZ: CSS series.
购买SitePoint Premium会员资格将使您可以访问完整的AtZ：CSS系列 。
Welcome to our AtoZ CSS series! In this series, I’ll be exploring different CSS values (and properties) each beginning with a different letter of the alphabet. In this article I’ve added a new quick tip/lesson about the Float and Clear properties and how to center elements in all sorts of ways.
欢迎来到我们的AtoZ CSS系列！ 在本系列中，我将探索不同CSS值(和属性)，每个均以不同的字母开头。 在本文中，我添加了有关Float和Clear属性以及如何以各种方式使元素居中的新的快速提示/课程。
F是浮动和清除 (F is for Float and Clear)
Floating is great if you want to move an element to the left or right of a page, but unfortunately, you can’t do float: center to center an element. What a pain right?
如果要在页面的左侧或右侧移动元素，则浮动是很好的选择，但是不幸的是，您不能进行float: center将元素居中。 什么痛苦吧？
Well, never fear, here’s the low down on centering all sorts of elements.
好吧，不要害怕，这是将各种元素居中的低点。
秘诀1 (Tip 1)
If the element is a block element, you can combine width and margin: auto.
如果元素是块元素，则可以组合width和margin: auto 。
margin: auto will automatically calculate the margins on the left and right sides, so they’re both equal, centering the block within its containing element.
margin: auto将自动计算左侧和右侧的边距，因此边距都相等，将块置于其包含元素的中心。
See the Pen tip-margin-auto by SitePoint (@SitePoint) on CodePen.
请参阅CodePen上的SitePoint ( @SitePoint )的Pen tip-margin-auto 。
秘诀2 (Tip 2)
If the element is inline (or inline-block), use text-align: center on the parent container.
如果元素是内联(或内联块)，请使用text-align: center在父容器上text-align: center 。
See the Pen tip-flexbox by SitePoint (@SitePoint) on CodePen.
请参阅CodePen上 SitePoint( @SitePoint )提供的Pen tip- flexbox 。
秘诀3 (Tip 3)
If the element is absolutely positioned, combine left and transform to center the element horizontally.
如果绝对定位元素，则组合left并transform以将元素水平居中。
See the Pen tip-flexbox by SitePoint (@SitePoint) on CodePen.
请参阅CodePen上 SitePoint( @SitePoint )提供的Pen tip- flexbox 。
A similar technique can also be used to vertically center elements, but more on that in a future tip!
也可以使用类似的技术使元素垂直居中，但在以后的技巧中会介绍更多！
秘诀4 (Tip 4)
Use flexbox (another ‘F’ property, yay!)
使用flexbox(另一个'F'属性，是的！)
To use flexbox to center a single item (or group of items) you need to set two properties on the containing element: display: flex and justify-content: center.
要使用flexbox将单个项目(或一组项目)居中，您需要在包含元素上设置两个属性： display: flex和justify-content: center 。
See the Pen tip-flexbox by SitePoint (@SitePoint) on CodePen.
请参阅CodePen上 SitePoint( @SitePoint )提供的Pen tip- flexbox 。
There are plenty of other cool things you can do with flexbox including growing or shrinking a containing element to best use the available space. You can even align an element both vertically and horizontally as opposed to blocking and inline which dictate either vertical or horizontal alignment.
flexbox还有许多其他很酷的功能，包括增大或缩小包含元素以最佳利用可用空间。 您甚至可以垂直和水平对齐元素，而不是指示垂直或水平对齐的blocking和inline。
Another great benefit of using flexbox is that there is no longer an issue with collapsing containers and the need to use a clearfix solution.
使用flexbox的另一个巨大好处是，不再需要折叠容器，而无需使用clearfix解决方案。
翻译自: https://www.sitepoint.com/atoz-css-quick-tip-float-and-clear/