SVG黑科技互动排版『单屏居中滑动』模板代码

目录：

• 添加每屏的内容

• 构建垂直滑动

• 单屏垂直居中滑动

• 单屏水平居中滑动

• 单屏垂直水平混合居中滑动

• 公众号懂点君回复 单屏居中滑动 获取本文全部案例代码

添加每屏的内容

在这里添加6个宽度为345像素，高度为700像素的内容块，为了方便演示，设置了背景颜色。

<section style="width: 345px;margin: 0 auto;">
    <!-- 第一屏 -->
    <section style="display: table;width: 100%;height: 700px;background-color: rgb(27, 188, 155);">
        <section style="display: table-cell;vertical-align: middle;text-align: center;color: #fff;font-size: 24px;">
            <section>请滚动到第二屏查看</section>
            <section>母</section>
        </section>
    </section>
    <!-- 第二屏 -->
    <section style="display: table;width: 100%;height: 700px;bac