作词：刘畅
作曲：谭旋
入夜渐微凉 繁花落地成霜
你在远方眺望 耗尽所有暮光
不思量 自难相忘
夭夭桃花凉 前世你怎舍下
这一海心茫茫 还故作不痛不痒不牵强
都是假象
凉凉夜色 为你思念成河
化作春泥 呵护着我
浅浅岁月 拂满爱人袖
片片芳菲 入水流
凉凉天意 潋滟一身花色
落入凡尘 伤情着我
生劫易渡 情劫难了
折旧的心 还有几分前生的恨
还有几分前生的恨
也曾鬓微霜 也曾因你回光
悠悠岁月漫长 怎能浪费时光
去流浪（去流浪）去换成长
灼灼桃花凉 今生愈渐滚烫
一朵已放心上 足够三生三世背影成双（背影成双）
在水一方
凉凉夜色 为你思念成河
化作春泥 呵护着我
浅浅岁月 拂满爱人袖
片片芳菲 入水流
凉凉天意 潋滟一身花色
落入凡尘 伤情着我
生劫易渡 情劫难了
折旧的心 还有几分前生的恨
凉凉三生三世 恍然如梦
须臾的年 风干泪痕
若是回忆不能再相认
就让情分 落九尘
凉凉十里 何时还会春盛
又见树下 一盏风存
落花有意 流水无情
别让恩怨爱恨 凉透那花的纯
吾生愿 牵尘
<script>
!function(e, t, a) {
function r() {
for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");
requestAnimationFrame(r)
}
function n() {
var t = "function" == typeof e.onclick && e.onclick;
e.onclick = function(e) {
t && t(),
o(e)
}
}
function o(e) {
var a = t.createElement("div");
a.className = "heart",
s.push({
el: a,
x: e.clientX - 5,
y: e.clientY - 5,
scale: 1,
alpha: 1,
color: c()
}),
t.body.appendChild(a)
}
function i(e) {
var a = t.createElement("style");
a.type = "text/css";
try {
a.appendChild(t.createTextNode(e))
} catch(t) {
a.styleSheet.cssText = e
}
t.getElementsByTagName("head")[0].appendChild(a)
}
function c() {
return "rgb(" + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + ")"
}
var s = [];
e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame ||
function(e) {
setTimeout(e, 1e3 / 60)
},
i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),
n(),
r()
} (window, document);
</script>
自古以来（是有多古？）～网页CSS的垂直置中需求始终没有停过，而其困难度也始终没有让人轻松过，经过了每位开发先烈们的研究后，据说CSS的垂直置中技巧已达到近十种之多，但始终鲜为人知，部分公司甚至将CSS的垂直置中技巧当成了面试题目，其重要性可见一斑，经过了Amos通灵了一下之后把垂直置中的写法扩增到了23个，今天就让Amos带着大家轻松的了解一下CSS的垂直置中的方式吧。
这个方式应该是最多人知道的了，常见于单行文字的应用，像是按钮这一类对象，或者是下拉框、导航此类元素最常见到的方式了。此方式的原理是在于将单行文字的行高设定后，文字会位于行高的垂直中间位置，利用此原理就能轻松达成垂直居中的需求了。
<div class="content">Lorem ipsam.</div>
.content{
width: 400px;
background: #ccc;
line-height:100px;
margin: auto;
}
既然可以使用第一种方式对行元素达成垂直居中的话，当然没有理由不能做到多行啊~但是你需要将多个元素或多行元素当成一个行元素来看待，所以我们必须要将这些数据多包一层，并将其设定为inline-block，并在该inline-block对象的外层对象使用inline-block来代替height的设置，如此便可以达到垂直居中的目的了，从使你的数据是包含了标题跟内容在内也可以正常的垂直居中了。
<div class="box box2">
<div class="content">
立马来看Amos实际完成的
<a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ </div>
</div>
h2{
text-align: center;
}
.box{
width: 500px;
border: 1px solid #f00;
margin: auto;
line-height: 200px;
text-align: center;
}
.box2 .content{
display: inline-block;
height: auto;
line-height:1;
width: 400px;
background: #ccc;
}
:before 伪类元素搭配 inline-block 属性的写法应该是很传统的垂直居中的技巧了，此方式的好处在于子元素居中可以不需要特别设定高度，我们将利用:before伪类元素设定为100%高的inline-block，再搭配上将需要居中的子元素同样设置成inline-block性质后，就能使用vertical-align:middle来达到垂直居中的目的了，此方式在以往其实是个非常棒的垂直居中解决方案，唯独需要特别处理掉inline-block元素之间的4-5px空间这个小缺陷，但也很实用了。
<h2>3.:before + inline-block</h2>
<div class="box box3">
<div class="content">
立马来看Amos实际完成的
<a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ </div>
</div>
h2{
text-align: center;
}
.box{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
text-align: center;
}
.box::before{
content:'';
display: inline-block;
height: 100%;
width: 0;
vertical-align: middle;
}
.box .content{
width: 400px;
background: #ccc;
display: inline-block;
vertical-align: middle;
}
谁说绝对定位要少用？Amos认为没有少用多用的问题，重点在于你是否有妥善运用才是重点，绝对定位在这个例子中会设置top:50%来抓取空间高度的50%，接着在将居中元素的margin-top设定为负一半的高度，这样就能让元素居中了，此方法可是自古以来流传多年的居中方式呢？
<h2>4.absolute + margin 負值</h2>
<div class="box box4">
<div class="content">
立马来看Amos实际完成的
<a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ </div>
</div>
h2{
text-align: center;
}
.box{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
position: relative;
}
.box4 .content{
width: 400px;
background: #ccc;
height: 70px;
position: absolute;
top:50%;
left: 50%;
margin-left: -200px;
margin-top: -35px;
}
又一个绝对定位的垂直居中的方案，这个方式比较特别一点，当元素设置为绝对定位后，假设它是抓不到整体可运用的空间范围，所以margin:auto会失效，但当你设置了top:0;bottom:0;时，绝对定位元素就抓到了可运用的空间了，
这时你的margin:auto就生效了（神奇吧），如果你的绝对定位元素需要水平居中于父层，那你同样可以设定left:0;right:0;来让绝对定位元素取得空间可运用范围，再让marign-left与margin-right设定为auto即可居中。
但此方式的缺点是你的定位元素必须有固定的宽高（百分比也算）才能正常居中。
<h2>5.absolute + translate(-50%, -50%)</h2>
<div class="box box5">
<div class="content">
立马来看Amos实际完成的
<a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ </div>
</div>
h2{
text-align: center;
}
.box{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
position: relative;
}
.content{
width: 400px;
background: #ccc;
height: 70px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
在一个绝对定位居中的方式，此方式应该算是最方便的了，因为此居中的定位元素不需要固定的宽高，我们利用绝对定位时的top 与right设置元素的上方跟左方各为50%，再利用translate(-50%,-50%)位移居中元素自身宽与高的50%就能达成居中的目的了。（css3好棒）
<h2>6.absolute + margin: auto</h2>
<div class="box box6">
<div class="content">
立马来看Amos实际完成的
<a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ </div>
</div>
h2{
text-align: center;
}
.box{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
position: relative;
}
.box5 .content{
width: 400px;
background: #ccc;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
}
Flex！前端的毒品！后端的宝物！这东西自从面世之后就不断的考验网页开发者的良心，到底要不要抛弃float拥抱flex，我想这答案人人心中自由一把尺，但先碰Flex再碰Float可谓先甜后苦，这顺序到底要倒吃甘蔗还是正吃甘蔗是实在难说，自从有了Flex之后，小孩考试一百分，设计网页不跑版，客户网页都RWD，老板赚钱好开心，我也加薪（加班）好甘心，不由的说Flex真的是一个神物，我们只要设定父层display:flex以及设定次轴(cross axis)属性align-items:center 就好了（说那么多结果重点就一行字是哪招啦），这个方式的优点是此层不需要设定高度即可自动居中，且原始代码干净无比，真的是用一次就让你升天啦。
<h2>7.Flex + align-items</h2>
<div class="box box7">
<div class="content">
立马来看Amos实际完成的
<a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ </div>
</div>
h2{
text-align: center;
}
.box{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
}
.content{
width: 400px;
background: #ccc;
}
Flex有多种方式可以让你把数据居中，适用Flex-grow的延展特性来达成，这个例子中Amos适用了flex-direction:column直式排法，搭配:before伪元素适用flex-grow伸展值能够取得剩下所有空间的特性，把它设定成一半的剩余空间就能做到把内容数据准确的推到垂直中间位置，算是个传统技法的延伸方式。这样的话上面第七个方式不是比较快？
<h2>8.Flex + before + flex-grow</h2>
<div class="box box8">
<div class="content">
立马来看Amos实际完成的
<a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ </div>
</div>
h2{
text-align: center;
}
.box{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
}
.box:before{
content: '';
flex-grow: .5;
}
.content{
width: 400px;
background: #ccc;
}
继续用Flex来居中，由于Flex元素对空间解读的特殊性，我们只要在父层元素设定display:flex，接着在需要垂直居中的元素上设定margin:auto，即可自动居中
<h2>9.Flex + margin</h2>
<div class="box box9">
<div class="content">
立马来看Amos实际完成的
<a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ </div>
</div>
h2{
text-align: center;
}
.box{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
display: flex;
}
.content{
width: 400px;
background: #ccc;
margin: auto;
}
align-self 应该大家都不陌生，基本上就是对flex次轴cross axis 的个别对齐方式只要对单一子层元素设定align-self:center就能达成垂直居中的目的了。
<h2>10.Flex + align-self</h2>
<div class="box box10">
<div class="content">
立马来看Amos实际完成的
<a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ </div>
</div>
h2{
text-align: center;
}
.box{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
display: flex;
justify-content: center;
}
.content{
width: 400px;
background: #ccc;
align-self: center
}
在正常的状况下，align-content 仅能对次轴多行flex item做居中，但是当我今天子层元素不确定有多少个时，且有时可能会有单个的情况出现时，此技巧就能用到了（当然你也能有其他解法），既然是多行子元素才能用，那我们就为单个子组件多加两个兄弟吧，使用:before以及:after 来让子元素增加到多个，这样就能使用flex的align-content属性来居中
<h2>11.Flex + align-content</h2>
<div class="box box11">
<div class="content">
立马来看Amos实际完成的
<a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ </div>
</div>
h2{
text-align: center;
}
.box{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
}
.content{
width: 400px;
background: #ccc;
}
.box11:before,
.box11:after{
content: '';
display: block;
width:100%;
}
CSS Grid最令人惊讶的就是这个template的功能了，简直就是把块元素当画布在使用，我们仅需要把模板设置成三列，就能搞定垂直居中了
<h2>12.Grid + template</h2>
<div class="box box12">
<div class="content">
立马来看Amos实际完成的
<a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ </div>
</div>
h2{
text-align: center;
}
.box{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
display: grid;
grid-template-rows: 1fr auto 1fr;
grid-template-columns: 1fr auto 1fr;
grid-template-areas:
'. . .'
'. amos .'
'. . .';
}
.content{
width: 400px;
background: #ccc;
grid-area: amos;
}
align-items不仅是Flex可用，连CSS Grid也拥有此属性可使用，但在Flex中align-items是针对次轴cross axis作对齐，而在CSS Grid中则是针对Y轴做对齐，你可以把它想象成是表格中储存单元格的vertical-align属性看待，就可以很好理解了
<h2>13.Grid + align-items</h2>
<div class="box box13">
<div class="content">
立马来看Amos实际完成的
<a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ </div>
</div>
h2{
text-align: center;
}
.box{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
display: grid;
justify-content: center;
align-items: center;
}
.content{
width: 400px;
background: #ccc;
}
CSS Grid的align-content跟Flex的align-content有点差异，CSS Grid对于空间的解释会跟Flex有一些些的落差，所以导致align-content在Flex中仅能针对多行元素起作用，但在Grid中就没这个问题，所以我们可以很开心的使用align-content来对子元素做垂直居中，丝毫不费力气
<h2>14.Grid + align-content</h2>
<div class="box box14">
<div class="content">
立马来看Amos实际完成的
<a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ </div>
</div>
h2{
text-align: center;
}
.box{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
display: grid;
justify-content: center;
align-content: center;
}
.content{
width: 400px;
background: #ccc;
}
align-self 应该大家都不陌生，基本上就是对grid Y轴的个别对齐方式，只要对单一子层元素设置为align-self:center就能达成垂直居中的目的了
<h2>15.Grid + align-self</h2>
<div class="box box15">
<div class="content">
立马来看Amos实际完成的
<a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ </div>
</div>
h2{
text-align: center;
}
.box{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
display: grid;
justify-content: center;
}
.content{
width: 400px;
background: #ccc;
align-self: center;
}
place-items这属性不知道有多少人用过，此属性是align-items与justify-items的缩写，简单的说就是水平与垂直的对齐方式，想当然的，设定center就能居中
<h2>16.Grid + place-items</h2>
<div class="box box16">
<div class="content">
立马来看Amos实际完成的
<a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ </div>
</div>
h2{
text-align: center;
}
.box{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
display: grid;
height: 150px;
margin: 0 auto;
place-items: center;
}
.content{
width: 400px;
background: #ccc;
}
place-content这属性有多少人用过，此属性是align-content与justify-content的缩写，简单的说就是水平与垂直的对齐方式，想当然的，设置center就能居中了
<h2>17.Grid + place-content</h2>
<div class="box box17">
<div class="content">
立马来看Amos实际完成的
<a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ </div>
</div>
h2{
text-align: center;
}
.box{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
display: grid;
height: 150px;
margin: 0 auto;
place-content: center;
}
.content{
width: 400px;
background: #ccc;
}
继续用Grid来居中，由于Grid元素对空间解读的特殊性，我们只要在父层元素设定display:grid，接着在需要垂直居中的元素上设置margin:auto即可自动居中。怎么这描述似曾相识。
<h2>18.Grid + margin</h2>
<div class="box box18">
<div class="content">
立马来看Amos实际完成的
<a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ </div>
</div>
h2{
text-align: center;
}
.box{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
display: grid;
}
.content{
width: 400px;
background: #ccc;
margin:auto;
}
这一招我想有点年纪的开发者应该都有看过，当然像我这么嫩的开发者当然是第一次看到啦，这一招的原理在于使用 CSS display属性将div设置成表格的单元格，这样就能利用支持存储单元格对齐的vertical-align属性来将信息垂直居中
<h2>19.display: table-cell</h2>
<div class="box box19">
<div class="content">
立马来看Amos实际完成的
<a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ </div>
</div>
h2{
text-align: center;
}
.box{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.content{
width: 400px;
background: #ccc;
margin: auto;
}
Cale是计算机英文单词calculator的缩写，这个由微软提出的css 方法，真的是网页开发者的一个福音。我们竟然可以在网页中直接做计算，这真是太猛了，从此我们再也不用在那边绞尽脑汁的数学计算了，或是想办法用js来动态计算，我们可以很轻松的利用calc()这个方法，来将百分比及时且动态的计算出实际要的是什么高度，真可谓是划时代的一个方法啊，但这个方法需要注意的是大量使用的话，网页性能会是比较差的，所以请谨慎使用。
<h2>20.calc</h2>
<div class="box box20">
<div class="content">
立马来看Amos实际完成的
<a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ </div>
</div>
h2{
text-align: center;
}
.box{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
}
.content{
width: 400px;
background: #ccc;
position: relative;
top:calc((100% - 70px) / 2);
margin:auto;
height: 70px;
}
这个技巧是利用了top:50%的招式，让你的元素上方能产生固定百分比的距离，接着让要居中的元素本身使用tanslateY的百分比来达成垂直居中的需求，translate是一个很棒的属性，由于translate的百分比单位是利用元素自身的尺寸作为100%，这样让我们要利用元素自身宽高做事变得方便很多。
<h2>21.relative + translateY(-50%)</h2>
<div class="box box21">
<div class="content">
立马来看Amos实际完成的
<a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ </div>
</div>
h2{
text-align: center;
}
.box{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
}
.content{
width: 400px;
background: #ccc;
position: relative;
top: 50%;
transform: translateY(-50%);
margin: auto;
}
什么！这也算垂直居中技巧，连我奶奶都知道这方式吧
对的，这的确也算是一种垂直居中的方式，不可讳言的这方式真的是简单过头了，以至于有些开发者认为这种方式都不能算是一种垂直居中的技巧，但同样的你无法反驳的是，我的数据的确垂直居中啦，好啦，就当我硬凹吧，你说的对，好吧
<h2>22.padding</h2>
<div class="box box22">
<div class="content">
立马来看Amos实际完成的
<a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！ </div>
</div>
h2{
text-align: center;
}
.box{
width: 500px;
border: 1px solid #f00;
margin: auto;
height: auto;
padding: 50px 0;
}
.content{
width: 400px;
background: #ccc;
margin: auto;
}
这个方式应该是比较少见到的有人使用的了，这个想法是被老友Paul所激发的，write-mode这个css属性的功能基本上跟垂直居中是八竿子打不着，它的用途是改变文字书写的方向从横变竖，且支持度从很早期的IE5就有支持了，但当时Amos很少使用，一来是网页多是横书较多，另外当时除了IE浏览器意外，其他浏览器的支持度都不是很好，也就很少使用了。
使用write-mode将一整个文字容器变成直书，接着将此容器利用text-align:center来达到垂直居中的目的，白话一点的解说就是，你把原本横排的文字变成竖排，所以原本横排用到的水平对齐方式，就变成了控制直排的中间了，原理就是这么简单。
但要特别注意的是浏览器对此语法的支持度来说，需要拆开写法才行，不然某些浏览器的语法不同，可能会让你的网页在某些浏览器上看起来无效，这会是最需要注意到的。
<h2>23.writing-mode</h2>立马来看Amos实际完成的
<div class="box box23">
<div class="content">
<div class="txt">
立马来看Amos实际完成的
<a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！
這個置中的想法來自於 Paul
</div>
</div>
</div>
h2{
text-align: center;
}
.box{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
writing-mode: tb-lr; /* for ie11 */
writing-mode: vertical-lr;
text-align: center;
margin:0 auto;
}
.content{
width: 400px;
background: #ccc;
display: inline-block; /* for ie & edge */
width: 100%;
writing-mode: lr-tb;
margin: auto;
text-align: left;
}
.box .txt{
width: 80%;
margin: auto;
}
看完了这23中css垂直居中写法，不知道你用过哪几种呢？又学到了那几种呢？反正我是涨知识了
看完了《无问西东》，没文化，只能说太好看了…
看到和听到的，经常会令你们沮丧，世俗是这样强大，强大到生不出改变它们的念头来。可是如果有机会提前了解了你们的人生，知道青春也不过只有这些日子，不知你们是否还会在意那些世俗希望你们在意的事情。
愿你在被打击时，记起你的珍贵，抵抗恶意；愿你在迷茫时，坚信你的珍贵，爱你所爱，行你所行，听从你心，无问西东。
电影除了故事完整感人，演员走心以外，还有就是影片里很多台词都让人沉浸其中，引发我们对人生、对自己的拷问。
下面这21句台词，总有一句在脑海里久久盘旋，挥之不去。
- 01 -
他们的爱与风华，只问自由，只问盛放，只问深情，只问初心，只问勇敢，无问西东。
- 02 -
这个时代缺的不是完美的人，缺的是从自己心底里给出的，真心、正义、无畏和同情。
- 03 -
看到的和听到的，经常会令你们沮丧，世俗这样强大，强大到生不出改变它们的念头。
可是无论外界的社会如何跌宕起伏，都对自己真诚，坚守原则。内心没有了杂念和疑问，才能勇往直前。
- 04 -
愿你在被打击时，记起你的珍贵，抵抗恶意；愿你在迷茫时，坚信你的珍贵。爱你所爱，行你所行，听从你心，无问西东。
- 05 -
你别怕，我就是那个给你托底的人，我会跟你一起往下掉，不管你掉得有多深，我都会在下面给你托着。我什么都不怕，就怕你掉的时候把我推开。
- 06 -
什么是真实？
你看到什么，听到什么，做什么，和谁在一起。有一种从心灵深处满溢出来的不懊悔，也不羞耻的和平与喜悦。
- 07 -
我们想你能够享受到人生的乐趣，比如：同你自己喜欢的女孩子结婚生子，注意不是给我增添子孙，而是你自己能够享受为人父母的乐趣。
- 08 -
静坐听雨无畏，无问西东求真。
- 09 -
你怪她没有真实，你给她真实的力量了吗？
- 10 -
人把自己置身于忙碌之中，有一种麻木的踏实，但丧失了真实，你的青春不过只有这些日子。
- 11 -
世界很美好，世道很艰难。
- 12 -
那一刻，我从思索生命意义的羞耻感中释放出来，希望你们今后的岁月里，不要放弃对生命的思索，对自己的真实。
- 13 -
上一次我以为我死了，醒来看到的人是你。这一次，死亡来临前我一定要找到你。
-14 -
在这个世界上，做一个好人要比做一个没原则的人付出更多的代价。可是做什么会让你真正开心，你要问清楚自己。
- 15 -
当初是你说你会对我好一辈子，当初，当初人就不能变吗？人为什么不可能变！为什么？其他事情都可以变而这件事就不能变。
- 16 -
不是华北之大容不下一张平静的课桌，而是整个国家都危亡了，我们要去当兵。
- 17 -
一生太短，一瞬好长，我们哭着醒来，又哭着遗忘。
- 18 -
我怕，你还没想好怎么过这一生，你的命就没了啊！
- 19 -
逝者已矣，生者如斯，对以后的人好吧。
- 20 -
把自己交给繁忙，得到的是踏实，却不是真实。
- 21 -
如果提前了解了你们要面对的人生，不知道你们是否还会有勇气前来。
