<p dir="auto">趁着博客刚刚支持 <code class="notranslate">jsfiddle</code>， 赶紧写一些demo</p>
<h2 dir="auto">垂直水平居中</h2>
<h3 dir="auto">通过 line-height 设置单行居中</h3>
&lt;iframe width="100%" height="300" src="//jsfiddle.net/axetroy/0tebhtkg/embedded/html,css,result/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"&gt;&lt;/iframe&gt;
<h2 dir="auto">通过 Tabel 表格元素居中</h2>
&lt;iframe width="100%" height="300" src="//jsfiddle.net/axetroy/4qs4pvr2/embedded/html,css,result/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"&gt;&lt;/iframe&gt;
<h2 dir="auto">通过 Flex 布局居中</h2>
&lt;iframe width="100%" height="300" src="//jsfiddle.net/axetroy/0bhypr6y/embedded/html,css,result/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"&gt;&lt;/iframe&gt;
<h2 dir="auto">圣杯布局</h2>
&lt;iframe width="100%" height="300" src="//jsfiddle.net/axetroy/dmkkv0wy/embedded/html,css,result/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"&gt;&lt;/iframe&gt;
<h2 dir="auto">侧边栏跟随</h2>
&lt;iframe width="100%" height="300" src="//jsfiddle.net/axetroy/bhonuo07/embedded/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"&gt;&lt;/iframe&gt;
<h2 dir="auto">返回顶部</h2>
&lt;iframe width="100%" height="300" src="//jsfiddle.net/axetroy/m0s5g7ex/embedded/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"&gt;&lt;/iframe&gt;
<h2 dir="auto">铆接点跳转</h2>
&lt;iframe width="100%" height="300" src="//jsfiddle.net/axetroy/evwk0uhm/embedded/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"&gt;&lt;/iframe&gt;
<h2 dir="auto">头部悬浮</h2>
&lt;iframe width="100%" height="300" src="//jsfiddle.net/axetroy/dvv60m3L/embedded/html,css,result/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"&gt;&lt;/iframe&gt;
<h2 dir="auto">聊天气泡</h2>
&lt;iframe width="100%" height="300" src="//jsfiddle.net/axetroy/8fb55rqs/embedded/html,css,result/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"&gt;&lt;/iframe&gt;
<h2 dir="auto">简单的验证码输入</h2>
&lt;iframe width="100%" height="300" src="//jsfiddle.net/axetroy/j2tkgeoh/embedded/html,css,result/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"&gt;&lt;/iframe&gt;
<h2 dir="auto">简单的iOS的切换按钮</h2>
&lt;iframe width="100%" height="300" src="//jsfiddle.net/axetroy/kvmdao9n/3/embedded/html,css,result/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"&gt;&lt;/iframe&gt;
&lt;iframe width="100%" height="300" src="//jsfiddle.net/axetroy/86j90o43/1/embedded/html,css,result/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"&gt;&lt;/iframe&gt;
<h2 dir="auto">侧边栏滑动</h2>
&lt;iframe width="100%" height="300" src="//jsfiddle.net/axetroy/g36nzvpq/embedded/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"&gt;&lt;/iframe&gt;

前端常见的布局和功能 (持续更新) 技术

垂直水平居中

通过 line-height 设置单行居中

通过 Tabel 表格元素居中

通过 Flex 布局居中

圣杯布局

侧边栏跟随

返回顶部

铆接点跳转

头部悬浮

聊天气泡

简单的验证码输入

简单的iOS的切换按钮

侧边栏滑动

大牛们的评论:朕有话说

关于我

Github

Todo

Gist