我们在编辑Web前端代码时，经常会遇到元素需要居中的问题。为此，讨论了几种使元件居中的方法。
1.水平居中(文本对齐：居中；)不浮动这个属性，我们可以把块级元素转换成inline/inline-block，然后把text-align:center加到它的父元素上；属性将其居中。如果是行内元素(比如span，img，A等。)，添加text-align:直接在父元素上居中；属性。
二、使用保证金：0auto水平前提：设置元素宽度，显示：block;的块级元素。要水平居中DIV，只需设置DIV的宽度，然后使用margin:0auto，css将自动计算左右边距，使DIV居中。
三、定位实现居中(偏移值需要计算)原理：通过定位使元素左上角居中，然后调整偏移值边距使元素居中。缺点：高度和宽度需要提前知道。div class=' absolute _ P1 ' div class=' absolute _ C1 '/div/div . absolute _ P1 { position:relative；宽度：200px高度：200px}.absolute _ P1 . absolute _ C1 { width:100p x；高度：100px位置：绝对；/*同/*固定*/左：50%；top:50%；左边距：-50px；边距-顶部：-50px；/* Offset要根据宽度和高度来计算*/}这种方法应用广泛，但是必须知道元素的宽度和高度。如果页面的宽度和高度是动态的，例如，如果需要在页面上弹出一个DIV层，它必须显示在中间。DIV的内容是动态的，因此宽度和高度也是动态的。这可以通过jquery解决。
第四，jquery实现水平和垂直居中。jquery实现横竖播放的原理是通过jquery设置div的css，获取div的左边距和上边距偏移量。边距偏移量的算法是用页面窗口的宽度减去div的宽度，所得值除以2，即为左偏移量。右偏移算法是相同的。注意div的css设置要在resize()方法中完成，也就是每次改变窗口大小都要执行css设置div。代码如下：$ (function () {$ (window)。resize (function () {$('。my div’)。CSS ({position:' absolute '，left:($(window))。width()-$('。my div’)。outerWidth())/2，top:($(窗口)。height()-$('。my div’)。outer height())/2 })；});})这种方法的好处是不需要知道div的具体宽度和高度。可以直接用jquery实现横向和纵向居中，并且兼容各种浏览器。这种方法用于许多弹出层效果。
5.定位居中(无需计算偏移值，margin:auto；这种方法的优点是行内元素和块级元素都适用，但是需要知道元素本身的宽度。span class=' child ' margin:auto；并使用/span/div . parent { border:1 px solid # 002 fff进行定位；宽度：400px高度：400px位置：相对；}.child { width:200 px；高度：120px背景：# ddd文本对齐：居中；行高：120像素；位置：绝对；左：0；右：0；top:0；底部：0；边距：自动；}
六。calc和定位calc的组合是英文单词calculate的缩写，是css3的新功能。您可以使用calc()为元素的边框、边距、填充、字体大小、宽度和其他属性设置动态值。我们过去常常使用框尺寸：边界框；将框的属性设置为无边距。现在我们有了另一个选择。但是要注意，只能用其中一个，否则会引起冲突。Calc根据与负边距相同的原则将元素居中。calc允许您根据当前页面布局计算大小。在上面的简单计算中，50%是容器元素的中心点，但如果只设置了50%，图片的左上角将与div的中心对齐。我们需要将图片向左上方移动图片宽度和高度的一半。公式为：top:calc(50%-(w/2))；左：calc(50%-(h/2))；/* CSS */div { border:1 px solidred；宽度：200px高度：200px位置：相对；} div span { width:150 px；高度：50px背景：# ddd位置：绝对；top:calc(50%-(50px/2))；左：calc(50%-(150 px/2))；}!- HTML - divspan我是一个span元素/span/div
七。使用css3的新属性transform:translate(x，y)属性。这种方式不需要设置固定的宽度和高度，但在移动端会用得更多。css3在移动端兼容的一个比较好的原则是：通过定位将元素左上角居中，然后通过translate将元素移动到中心。由于translate支持百分比，因此没有必要单独计算偏移量。
八。使用伸缩居中使用伸缩居中不需要知道元素本身的宽度和高度以及元素的属性。/* CSS */div { border:1 px solidred；宽度：200px高度：200px显示器：flexjustify-content:居中；/*水平居中*/align-items:居中；/*垂直居中*/} div span { background:# DDD；}!- HTML - divspan我是一个span元素/span/div
九。使用表格单元使用显示：表格单元在中央，而不是使用表格标签；可以实现水平居中和垂直居中，但是这种方法需要添加额外的元素作为外部容器。/*css*/。居中对齐{ border:1px solidred；宽度：200px高度：200px显示：表格；}.中心-核心{显示：表格单元；文本对齐：居中；垂直对齐：居中；} span {背景：# ddd}!-html-div class=' center-aligned ' div class=' center-core ' span我是span元素/span/div/div
