整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
SS中文字居中显示的方式有以下五种：
将text-align属性值设置为center可以将文本居中显示。
.center {
text-align: center;
}将vertical-align属性值设置为middle可以将文本垂直居中显示。
.center {
vertical-align: middle;
}将line-height属性值设置为比字体大小略大的值，可以使文本在容器中垂直居中显示。
.center {
line-height: 20px;
}display: flex属性将父元素设置为弹性布局，并使用align-items: center属性将子元素在交叉轴上居中对齐。
.center {
display: flex;
align-items: center;
}
position: absolute属性和transform: translateY(-50%)将子元素相对于其父元素垂直居中对齐。
// 父容器
.center {
position: relative;
height: 200px;
}
// 子容器
.center > div {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
height: 100px;
width: 200px;
background-color: #ccc;
}以上就是CSS中文字居中显示的几种方式，根据实际需求选择合适的方式即可。
● ●
在网页上使 HTML 元素居中看似一件很简单的事情. 至少在某些情况下是这样的，但是复杂的布局往往使一些解决方案不能很好的发挥作用。
在网页布局中元素水平居中比元素垂直居中要简单不少，同时实现水平居中和垂直居中往往是最难的。现在是响应式设计的时代，我们很难确切的知道元素的准确高度和宽度，所以一些方案不大适用。据我所知, 在CSS中至少有六种实现居中的方法。我将使用下面的HTML结构从简单到复杂开始讲解:
<div class="center"> <img src="jimmy-choo-shoe.jpg" alt></div>鞋子图片会改变，但是他们都会保持500pxX500px的大小。 HSL colors 用于使背景颜色保持一致。
有时显而易见的方案是最佳的选择：
div.center { text-align: center; background: hsl(0, 100%, 97%);
}
div.center img { width: 33%; height: auto;}这种方案没有使图片垂直居中：你需要给<div>添加padding或者给内容添加margin-top和margin-bottom使容器与内容之间有一定的距离。
这种方式实现水平居中和上面使用text-align的方法有相同局限性。
div.center { background: hsl(60, 100%, 97%);}
div.center img { display: block; width: 33%; height: auto; margin: 0 auto;}注意： 必须使用display: block使margin: 0 auto对img元素生效。
使用 display: table-cell, 而不是使用table标签; 可以实现水平居中和垂直居中，但是这种方法需要添加额外的元素作为外部容器。
<div class="center-aligned"> <div class="center-core"> <img src="jimmy-choo-shoe.jpg"> </div></div>CSS:
.center-aligned { display: table; background: hsl(120, 100%, 97%); width: 100%;}.center-core { display: table-cell; text-align: center; vertical-align: middle;}
.center-core img { width: 33%; height: auto;}注意：为了使div不折叠必须加上width: 100%，外部容器元素也需要加上一定高度使得内容垂直居中。给html和body设置高度后，也可以使元素在body垂直居中。此方法在IE8+浏览器上生效。
这种 方案 有非常好的跨浏览器支持。有一个缺点就是必须显式声明外部容器元素的height：
.absolute-aligned { position: relative; min-height: 500px; background: hsl(200, 100%, 97%);}.absolute-aligned img { width: 50%; min-width: 200px; height: auto; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;}Stephen在他的 博客 中演示了这种方案的几种变化。
Chris Coiyer 提出了一个使用 CSS transforms 的新方案。 同样支持水平居中和垂直居中:
.center { background: hsl(180, 100%, 97%); position: relative; min-height: 500px;}.center img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30%; height: auto;}但是有以下几种缺点:
CSS transform 在部分就浏览器上需要使用 前缀。
不支持 IE9 以下的浏览器。
外部容器需要设置height（或者用其他方式设置），因为不能获取 绝对定位 的内容的高度。
如果内容包含文字，现在的浏览器合成技术会使文字模糊不清。
当新旧语法差异和浏览器前缀消失时，这种方法会成为主流的居中方案。
.center { background: hsl(240, 100%, 97%); display: flex; justify-content: center; align-items: center;}.center img { width: 30%; height: auto;}在很多方面 flexbox 是一种简单的方案， 但是它有新旧两种语法以及早期版本的IE缺乏支持 （尽管可以使用 display: table-cell作为降级方案）。
现在规范已经最终确定，现代浏览器也大都支持,我写了一篇详细的教程 教程。
在某些情况下比flexbox更全面：
.center { background: hsl(300, 100%, 97%); min-height: 600px; position: relative;}.center img { width: 40%; height: auto; position: absolute; top: calc(50% - 20%); left: calc(50% - 20%);}很简单，calc允许你基于当前的页面布局计算尺寸。在上面的简单计算中， 50% 是容器元素的中心点，但是如果只设置50%会使图片的左上角对齐div的中心位置。 我们需要把图片向左和向上各移动图片宽高的一半。计算公式为：
top: calc(50% - (40% / 2));left: calc(50% - (40% / 2));在现在的浏览其中你会发现，这种方法更适用于当内容的宽高为固定尺寸：
.center img { width: 500px; height: 500px; position: absolute; top: calc(50% - (300px / 2)); left: calc(50% - (300px – 2)); }我在 这篇文章 中详细讲解了calc。
这种方案和flex一样有许多相同的缺点： 虽然在现代浏览器中有良好的支持，但是在较早的版本中仍然需要浏览器前缀，并且不支持IE8。
.center img { width: 40%; height: auto; position: absolute; top: calc(50% - 20%); left: calc(50% - 20%);}当然还有 其他更多的方案。理解这六种方案之后，web开发人员在面对元素居中的时候会有更多的选择。
关注“网页设计自学平台”订阅号回复以下｜关键字｜
｜dw教程｜js教程｜淘宝案例｜软件下载｜搜狐案例｜网站模板
｜ps教程｜ai教程 ｜ui教程｜腾讯案例｜ ae教程 ｜字体下载｜
｜上课素材｜前端特效｜华润万家案例｜最新dw案例｜
戳“阅读原文”入群获取最新高清前端视频！
着大家了解一下CSS的垂直居中的方式吧。首先是大家最熟悉
适用情景：单行文字垂直居中技巧
这个方式应该是最多人知道的了，常见于单行文字的应用，像是按钮这一类对象，或者是下拉框、导航此类元素最常见到的方式了。此方式的原理是在于将单行文字的行高设定后，文字会位于行高的垂直中间位置，利用此原理就能轻松达成垂直居中的需求了。
适用情景：多对象的垂直居中技巧
既然可以使用第一种方式对行元素达成垂直居中的话，当然没有理由不能做到多行啊~但是你需要将多个元素或多行元素当成一个行元素来看待，所以我们必须要将这些数据多包一层，并将其设定为inline-block，并在该inline-block对象的外层对象使用inline-block来代替height的设置，如此便可以达到垂直居中的目的了，从使你的数据是包含了标题跟内容在内也可以正常的垂直居中了。
适用情景：多对象的CSS垂直居中技巧
:before 伪类元素搭配 inline-block 属性的写法应该是很传统的垂直居中的技巧了，此方式的好处在于子元素居中可以不需要特别设定高度，我们将利用:before伪类元素设定为100%高的inline-block，再搭配上将需要居中的子元素同样设置成inline-block性质后，就能使用vertical-align:middle来达到垂直居中的目的了，此方式在以往其实是个非常棒的垂直居中解决方案，唯独需要特别处理掉inline-block元素之间的4-5px空间这个小缺陷，但也很实用了。
适用情景：多行文字的垂直居中技巧
谁说绝对定位要少用？Amos认为没有少用多用的问题，重点在于你是否有妥善运用才是重点，绝对定位在这个例子中会设置top:50%来抓取空间高度的50%，接着在将居中元素的margin-top设定为负一半的高度，这样就能让元素居中了，此方法可是自古以来流传多年的居中方式呢？
适用情景：多行文字的垂直居中技巧
又一个绝对定位的垂直居中的方案，这个方式比较特别一点，当元素设置为绝对定位后，假设它是抓不到整体可运用的空间范围，所以margin:auto会失效，但当你设置了top:0;bottom:0;时，绝对定位元素就抓到了可运用的空间了，这时你的margin:auto就生效了（神奇吧），如果你的绝对定位元素需要水平居中于父层，那你同样可以设定left:0;right:0;来让绝对定位元素取得空间可运用范围，再让marign-left与margin-right设定为auto即可居中。但此方式的缺点是你的定位元素必须有固定的宽高（百分比也算）才能正常居中。
适用情景：多行文字的垂直居中技巧
在一个绝对定位居中的方式，此方式应该算是最方便的了，因为此居中的定位元素不需要固定的宽高，我们利用绝对定位时的top 与right设置元素的上方跟左方各为50%，再利用translate(-50%,-50%)位移居中元素自身宽与高的50%就能达成居中的目的了。（css3好棒）
7. Flex + align-items
适用情景：多行文字的垂直居中技巧
Flex！前端的毒品！后端的宝物！这东西自从面世之后就不断的考验网页开发者的良心，到底要不要抛弃float拥抱flex，我想这答案人人心中自由一把尺，但先碰Flex再碰Float可谓先甜后苦，这顺序到底要倒吃甘蔗还是正吃甘蔗是实在难说，自从有了Flex之后，小孩考试一百分，设计网页不跑版，客户网页都RWD，老板赚钱好开心，我也加薪（加班）好甘心，不由的说Flex真的是一个神物，我们只要设定父层display:flex以及设定次轴(cross axis)属性align-items:center 就好了（说那么多结果重点就一行字是哪招啦），这个方式的优点是此层不需要设定高度即可自动居中，且原始代码干净无比，真的是用一次就让你升天啦。
适用情景：多行文字的垂直居中技巧
Flex有多种方式可以让你把数据居中，适用Flex-grow的延展特性来达成，这个例子中Amos适用了flex-direction:column直式排法，搭配:before伪元素适用flex-grow伸展值能够取得剩下所有空间的特性，把它设定成一半的剩余空间就能做到把内容数据准确的推到垂直中间位置，算是个传统技法的延伸方式。这样的话上面第七个方式不是比较快？
适用情景：多行文字的垂直居中技巧
继续用Flex来居中，由于Flex元素对空间解读的特殊性，我们只要在父层元素设定display:flex，接着在需要垂直居中的元素上设定margin:auto，即可自动居中
适用情景：多行文字的垂直居中技巧
align-self 应该大家都不陌生，基本上就是对flex次轴cross axis 的个别对齐方式只要对单一子层元素设定align-self:center就能达成垂直居中的目的了。
适用情景：多行文字的垂直居中技巧
在正常的状况下，align-content 仅能对次轴多行flex item做居中，但是当我今天子层元素不确定有多少个时，且有时可能会有单个的情况出现时，此技巧就能用到了（当然你也能有其他解法），既然是多行子元素才能用，那我们就为单个子组件多加两个兄弟吧，使用:before以及:after 来让子元素增加到多个，这样就能使用flex的align-content属性来居中
适用情景：多行文字的垂直居中技巧
CSS Grid最令人惊讶的就是这个template的功能了，简直就是把块元素当画布在使用，我们仅需要把模板设置成三列，就能搞定垂直居中了
适用情景：多行文字的垂直居中技巧
align-items不仅是Flex可用，连CSS Grid也拥有此属性可使用，但在Flex中align-items是针对次轴cross axis作对齐，而在CSS Grid中则是针对Y轴做对齐，你可以把它想象成是表格中储存单元格的vertical-align属性看待，就可以很好理解了
适用情景：杜航文字的垂直居中技巧
CSS Grid的align-content跟Flex的align-content有点差异，CSS Grid对于空间的解释会跟Flex有一些些的落差，所以导致align-content在Flex中仅能针对多行元素起作用，但在Grid中就没这个问题，所以我们可以很开心的使用align-content来对子元素做垂直居中，丝毫不费力气
适用情景：多行文字的垂直居中技巧
align-self 应该大家都不陌生，基本上就是对grid Y轴的个别对齐方式，只要对单一子层元素设置为align-self:center就能达成垂直居中的目的了
适用情景：多行文字的垂直居中技巧
place-items这属性不知道有多少人用过，此属性是align-items与justify-items的缩写，简单的说就是水平与垂直的对齐方式，想当然的，设定center就能居中
适用情景：多行文字的垂直居中技巧
place-content这属性有多少人用过，此属性是align-content与justify-content的缩写，简单的说就是水平与垂直的对齐方式，想当然的，设置center就能居中了
适用情景：多行文字的垂直居中技巧
继续用Grid来居中，由于Grid元素对空间解读的特殊性，我们只要在父层元素设定display:grid，接着在需要垂直居中的元素上设置margin:auto即可自动居中。怎么这描述似曾相识。
适用情景：多行文字的垂直居中技巧
这一招我想有点年纪的开发者应该都有看过，当然像我这么嫩的开发者当然是第一次看到啦，这一招的原理在于使用 CSS display属性将div设置成表格的单元格，这样就能利用支持存储单元格对齐的vertical-align属性来将信息垂直居中
适用情景：多行文字的垂直居中技巧
Cale是计算机英文单词calculator的缩写，这个由微软提出的css 方法，真的是网页开发者的一个福音。我们竟然可以在网页中直接做计算，这真是太猛了，从此我们再也不用在那边绞尽脑汁的数学计算了，或是想办法用js来动态计算，我们可以很轻松的利用calc()这个方法，来将百分比及时且动态的计算出实际要的是什么高度，真可谓是划时代的一个方法啊，但这个方法需要注意的是大量使用的话，网页性能会是比较差的，所以请谨慎使用。
适用情景：多行文字的垂直居中技巧
这个技巧是利用了top:50%的招式，让你的元素上方能产生固定百分比的距离，接着让要居中的元素本身使用tanslateY的百分比来达成垂直居中的需求，translate是一个很棒的属性，由于translate的百分比单位是利用元素自身的尺寸作为100%，这样让我们要利用元素自身宽高做事变得方便很多。
大家还有好的方法,分享在评论区,谢谢您的分享!有需要前端开工具,和学习资料可私聊发我666!即可得到获取方式!
*请认真填写需求信息，我们会在24小时内与您取得联系。
