css居中的几种方法和各自缺点（多个你不知道的）
要使内联元素（如链接，span 或img）居中，使用 text-align: center 足够了。
<divclass="desk">
<span class="plate"></span>
</div>
.desk{
text-align:center;
}
对于多个内联元素，也可以使用text-align：center:
<divclass="desk">
<span class="plate"></span>
<span class="plate"></span>
</div>
.desk{
text-align:center;
}
使用 flexbox 也可以快速居中元素：
.desk{
display:flex;
justify-content:center;
}
对于多个内联的项目，也可以正常工作：
使用网格容器时，图中的盘子将根据其网格区域居中。请注意，除非将它们包裹在一个元素中，否则这将不适用于多个盘子。
.desk{
display:grid;
justify-content:center;
}
宽度和高度已知的块元素可以通过设置margin-left:auto 和 margin-right:auto 居中元素。
.plate{
width:120px;
height:120px;
margin-left:auto;
margin-right:auto;
}
对于多个块元素，它们应该包装在一个元素中，然后让这个父元素居中。
.tray{
display:flex;
margin-left:auto;
margin-right:auto;
}
对于 flexbox 同样也是使用 justify-content:center 来居中元素：
.desk{
display:flex;
justify-content:center;
}
对于多个元素，我们不需要将它们包裹在一个元素中，flexbox 可以将它们都居中。
CSS定位通过绝对定位，我们可以轻松地通过CSS transform将其水平居中。
.plate{
position:absolute;
left:50%;
transform:translateX(-50%);
}
在已知元素宽度的情况下，可以使用负边距代替CSS transform。
.plate{
position:absolute;
left:50%;
margin-left:-60px;
}
Vertical Padding
垂直居中元素最简单的方法之一是使用padding:
padding-top:24px;
padding-bottom:24px;
}
vertical-align属性可用于一个或多个元素。
在此示例中，叉子和刀子应与桌子垂直居中。
.desk{
text-align:center;
}
.plate,
.fork,
.knife{
vertical-align:middle;
}
为了对齐盘子，叉子和刀，我们可以使用 flexbox:
.desk{
display:flex;
justify-content:center;
align-items:center;
}
通过绝对定位元素，可以使用 CSS transform将元素垂直居中：
.plate{
position:absolute;
top:50%;
transform:translateY(-50%);
}
如果知道元素高度，则可以使用负边距代替transform。
.plate{
position:absolute;
top:50%;
margin-top:-60px;
}
使用CSS网格，我们可以使用align-items将项目垂直于其网格区域居中。
.desk{
display:grid;
align-items:center;
}
Padding 和Text Align
.plate{
text-align:center;
padding-top:24px;
padding-bottom:24px;
}
.plate{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
通过 justify-content:center 和 align-items:center 就可以将元素垂直水平居中：
.plate{
display:flex;
justify-content:center;
align-items:center;
}
通过place-items属性就可以通过，它结合了justify-content和align-items:
.desk{
display:grid;
place-items:center;
}
作者：Ahmad Shadeed 译者：前端小智 来源：ishadeed 原文：https://ishadeed.com/article/learn-css-centering/
更多干货文章，可关注小智的公众号：大迁世界 (打开微信，搜索公众号)，里面有很多类似的文章，有需要啥资料的也可以在评论区跟我说，我会尽量解答。
,免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
