整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
着大家了解一下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!即可得到获取方式!
中，是我们编码过程中最常见的，那么，我们平时常见的居中方式，下面一一罗列出来，有错误的地方，望码友多多包涵并加以矫正。
水平居中
1、多块级元素，设置display:inline-block;使之在一行排列,在父级样式里，设置text-align：center;就可以实现水平居中的效果
body {
text-align: center;
}
div{
width: 100px;
height: 100px;
border: 1px solid;
display: inline-block;
}
2、内联元素，利用text-align：center;可以实现块级元素内部的内联元素的水平居中
div {
border: 1px solid red;
width: 100px;
height: 100px;
text-align: center;
}
<div>
<span>块级元素中的行内元素的水平居中</span>
</div>
3、块级元素，通过把固定宽高的块级元素的margin-left和margin-right设置为auto，方可实现
div{
width: 100px;
height: 100px;
border: 1px solid;
margin： 0 auto;
}
<div></div>
4、利用弹性盒子（display: flex;）
给父级定宽定高，然后设置display: flex;以及justify-content: center;方可达到水平居中效果
body {
width: 500px;
height: 500px;
display: flex;
justify-content: center;
border: 1px solid red;
}
div {
width: 100px;
height: 100px;
border: 1px solid;
}
<body>
<div></div>
</body>
垂直居中
1、内联元素（单行）
通过设置元素的height和line-height,方可达到居中效果
2、多行元素，利用表布局（table）
通过给想要居中的元素的父级设置display: talbe-cell;以及vertical-align：enter;方可居中
3、弹性盒子（flex）
给父级设置display: flex;变成弹性盒子。
分两种，
（1），主轴方向为水平，直接设置 align-items: center;
（2），主轴方向为垂直，设置flex-direction: column;改变主轴方向，然后设置justify-content: center;
弹性盒模型主轴不同，居中的方式也不同，灵活应用。
4、固定宽高的块级元素
利用父相子绝的定位原理，实现垂直居中
position: absolute;
left: 50%;
top: 50%;
margin-left: (自身高度的一半);
5,未知宽高的块级元素
利用transform: translateY(-50%);方可实现
position: absolute;
top: 50%;
transform: translateY(-50%);
水平垂直方向的居中
1、固定宽高
通过margin平移整体宽高的一半，实现水平垂直居中
{
position: absolute;
width: 100px;
height: 100px;
border: 1px solid;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -50px;
}
2、未知宽高
利用transform中的translate()属性实现
{
position: absolute;
border: 1px solid;
left: 50%;
top: 50%;
transform: translateY(-50%);
transform: translateX(-50%);
}
3、弹性盒子（flex）
通过display：flex，把父级变成弹性盒模型，利用align-items: center;justify-content: center;方可实现居中。
注意：弹性盒子容器中，多行项目的居中方式另加计算。
body {
border: 1px solid;
width: 300px;
height: 300px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
div {
border: 1px solid;
width: 100px;
height: 100px;
}
随着学习的不断深入，居中方式可以有很多种，我们要善于利用，更加明确什么情况下用怎样的居中方式。
位小伙伴在写前端代码的时候，经常会遇到元素垂直居中的情况，虽然css垂直居中是一个很简单的问题，但细细研究下来却发现原来一个垂直居中并不简单。
先从一个最简单的场景说一下吧。
如上图所示，在一个固定的div框内有一行文字，我们需要把文字水平垂直居中，我相信各位小伙伴都可以解决这个问题，就是给文字一个行高，以及text-align。
但有一天我们发现红框的文字变成多行的时候，问题就来了
这时候我们就发现我们就发现文字竟然跑到外面去了，这时候我们就发现刚才方法的弊端就是只适用于单行文字垂直居中。那我们怎么解决多行文字垂直居中的问题呢？我们先来一个笨办法试试效果。现在文字有两行，我们要求文字的行高是30px。那两行的文字的高度就是60px。外面红框的高度是100px。如果让文字垂直居中的话需要给span一个( 100 - 60 ) / 2=30px的padding-top。好废话不多说，上代码
可运行结果确没有按照我们想象中的进行，文字并没有垂直居中，这是为什么呢？这是因为span默认是行内元素，行内元素给padding-top是不起作用的，这时候我们需要做的就是改变span的display，让其变成块元素。
这时候我们发现文字已经垂直居中啦。但这个padding-top需要手动计算出结果，可不可以让css自动计算出padding-top的值呢（这里问什么用padding-top而不用margin-top呢？其实这里有个很尖锐的问题，先挖个坑，留着以后说明）？答案是可以的，css3中新增的计算属性calc()就可以帮我们解决这个问题。
需要注意的一点就是calc中的运算符号前后需要各加一个空格
这个时候我们发现即使用calc计算也存在很多问题，这种方法“太笨”了，比如现在文字变成了三行，行距变成了20px。这时候我们需要重新计算padding-top的值。由此我们可以得出这种方法的适用于文字基本固定不变的场景。如何解决动态内容的垂直居中呢？我们先把span的display:block去掉，然后加另外一个属性vertical-align。这个属性是用来处理元素垂直对齐方式的
运行结果确跟我们想象的并不一样
文字没有垂直居中。vertical-align这个属性脾气很怪异，时而有用，时而无用，有很多时候着实让人摸不着头脑，关于此属性的解析我会在后续的文章中做详细的讲解，在这就不过多的阐述。我们都知道html中的单元格是有水平居中与垂直居中的属性的，那我们可不可以把span变成具有单元格属性的元素呢？答案当然是肯定的。
文字并没有垂直居中，其实这是因为需要单元格无法根据父元素的高度在确定自己的高度决定的，决绝方法就是给一个高度即可，
完美。不管文字有多少个，多少行，文字始终会垂直居中了。这种方法是很值得推荐的，因为兼容性好，甚至可以兼容ie6。前提是文字总内容不要超出外边框
文字可以通过js或者后端程序进行截取。
用vertical-align: middle配合display: table-cell;让元素居中的在很多时候是很脆弱的，比如一旦使用的float或者绝对定位固定定位等就会失效。
上面讨论的方法都是限制知道外部元素具体的高度情况下的垂直居中，一旦外部高度改变，那我们就需要修改span相对应的参数，很不方便，也不灵活。那外部容器高度不确定的情况下如何做到垂直居中呢？
我们可以利用最经典的方式positon+margin
运行结果：
完美，绿色的方块已垂直居中。这时候我们修改外部元素的高度绿色的块也会居中。
内部元素用到top与margin-top两个属性来控制元素垂直居中，虽然margin-top可以用calc()来计算，但还是需要在写一次内部元素的高度，那有什么办法解决这一问题呢？其实很简单，
给绝地定位的元素一个初始left，top，bottom, right。那元素的margin:auto就会起作用。
如果这时候让文字也在绿色框中垂直居中呢？我们想到了很经典的vertical-align: middle配合display: table-cell。但这里用了绝对定位，用vertical-align: middle不会起作用。那我们解决这问题呢？
很简单我们在span里面在嵌套一层。
运行结果：
完美。垂直中的垂直。
那问题又来了，如果外部元素的高度位置，内部元素的高度未知，如何做到内部元素相对于外部元素垂直居中呢？
解决这个问题的方法有很多种，大部分是用css3去处理的。当然css2也是可以完成的。我再这里写几种比较常见的
这里用文字垂直居中举例说明，为什么用文字呢？因为文字的高度是不固定的，文字的多少会影响元素的高度，所有用文字垂直居中来演示再好不过了。
第一种是用::before伪元素配合vertical-align
这里需要注意的就是display: inline-block元素之间的间距问题。
由于display: inline-block间距的问题导致文字达到一定宽度的时候会整体移出外部元素，解决办法是吧外部元素的字体大小设置为0，然后再在内部元素内加一个字体大小即可。
是不是很完美。但这时候对有强迫症的我来说发现一个问题，就是文字左右边距竟然不一样。
这个问题的解决方法也很简单，来一个text-align: justify;文字两端对齐
第二种方法就是定位配合位移。
前文提到用posrtion配合top以及margin-top实现垂直居中，前提是需要知道居中元素的高度，如果用css3的transform: translate()属性的话就无需知道内部元素的高度啦
是不是感觉css3真的很神奇。
第三种方法就是利用flex
是不是很简单粗暴，内容部元素都不需要写任何样式。果然还是css3好用啊
第四种方法就是利用Grid + template
这个用的css3的列，使用不是很多，有兴趣的小伙伴可以自行了解一下。
关于flex跟Grid让元素垂直居中可以裂变出很多种方法，在这里我就不一一列举了，以后介绍flex或者grid的时候会详细介绍，再次不在赘述。
*请认真填写需求信息，我们会在24小时内与您取得联系。
