我们都知道align-content: center属性通常用于 Flexbox 布局中，它确保在多行的 flex 容器内的元素在垂直方向上居中排列。但是现在再也不需要依赖于Flex布局或者Grid布局了，它针对普通块级元素也能生效

常见的一种方式就是使用flex布局设置居中。利用弹性布局(flex)，实现水平居中，其中justify-content 用于设置弹性盒子元素在主轴（横轴）方向上的对齐方式

不定宽高元素水平垂直居中：transform: translate()，flex 布局，利用justify-content和align-items 实现居中，使用table+table-cell实现垂直居中，display:inline-block;或margin: auto;实现水平居中

利用 CSS 来实现对象的垂直居中有许多不同的方法，比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。

我们想要的是居中的效果，所以触发滚动的条件是点scroll-view宽度一半之后的项才开始滚动，所以需要减去宽度的一半，offsetLeft为相对于scroll-view总长度的X轴距离，只要相减计算后的数值为正数，就可以证明上面的条件，触发滚动

今天才发现，给文字设置 letter-spacing 再设置 text-align: center; ，文字会整体往左偏移，不能居中。 给文字嵌套了一个 span 标签，再选择文字可以看出，letter-spacing 给每个字的右边都加了一个间距。

垂直居中，在 CSS 中是一个老生常谈的问题，面试的时候也会时常被提及。所以，今天我们就来聊聊 9 种不同的居中方法。有常见的 flex、transform、absolute 等等。也有 CSS3 的网格布局。还有伪元素的方法，是的，你没有看错

在曾经的 淘宝UED 招聘 中有这样一道题目：使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。当然出题并不是随意，而是有其现实的原因

相比较水平居中，垂直居中比较复杂点。尤其是在实际页面中，有很多特殊的场景，导致水平居中实现起来比较麻烦。这篇文章旨在纪录一些我知道的居中方式

方法一：兼容IE67，但是当元素宽度大于50%时，会出现滚动条。外层使用text-align为center是为了让里面的内联元素居中，很显然在外层设置text-align:center后

在我们网页开布局中，经常遇到div元素的垂直居中或者水平居中。这篇文章，我总结一下

第一种：定位+margin:auto,注意：兼容性较好，缺点:不支持IE7以下的浏览器.第二种：定位+margin-left+margin-top注意：兼容性好;缺点:必须知道元素的宽高,第三种：定位+transfrom

css中line-height行高是指文本行基线之间的距离，不同字体，基线位置不同。line-height只影响行内元素和其他行内内容，而不会直接影响块级元素。line-height实际应用：图片水平垂直居中、多行文本水平垂直居中、用line-height代替height

目前在移动端安卓手机上使用line-height属性，让它的值等于height，结果发现是不居中的。出现了一定位置的偏移情况，如果略微只有两三个像素差距是看不出来的。

在网页布局中，图文排版是我们常用的，那么经常会遇到如何让图片居中显示呢，这篇文章将总结常用css实现图片居中的方法总结。