jQueryのプラグイン「Vegas2」導入により、文字の表示崩れ

前提・実現したいこと

jQueryのプラグイン「Vegas2」を実装して背景画像のスライドショーにしたいと思っております。
実装に伴い、2点問題が発生してしまいましたのでご質問失礼いたします。

①
無事スライドショーは実装出来ましたが、プラグイン実装前はしっかり中央寄せになっておりました文章(3文)が
「下記画像」のように左上にきてしまいます。これを中央寄せにするにはどのようにすればよろしいでしょうか？

②
併せて、下記文章にはタイピング風アニメーションを実装しておりましたが動作しなくなってしましました。
プラグイン導入により、上手く反映していないと思われます。
該当文章：「コーディングであなたの想いを「カタチ」にします。」

お手数ですが、上記2点に関してご教示頂ければ幸甚です。
宜しくお願い致します。

該当のソースコード

HTML
1
2<div class="main">
3            <div class="main-container">
4                <div class="title">
5                    <h1>WEBサイト作成にお困りですか？</h1>
6                    <span class="sub-title">コーディングであなたの想いを「カタチ」にします。</span>
7                    <a href="#form4" class="contact-btn">お問い合わせはこちら</a>
8                </div>
9            </div>
10        </div>

CSS
1.main{
2    height:1080px;
3    width:100%;
4    background-image:url(img/bgc016.jpg);
5    background-size:cover;
6    background-position:center;
7    box-shadow: 0px -20px 10px -10px white inset;
8    color:white;
9    display:table;
10}
11
12.main-container{
13    display: table-cell;
14    vertical-align: middle;
15}
16
17.title{
18    text-align:center;
19    letter-spacing:2px;
20    opacity:0.9;
21}
22
23.main h1{
24    visibility:hidden;
25    margin:0;
26    font-size:54px;
27    font-family: fantasy;
28}
29
30.sub-title{
31    font-size:25px;
32}
33
34.contact-btn{
35    display:block;
36    width:250px;
37    margin:20px auto;
38    color:white;
39    font-weight:bold;
40    text-decoration:none;
41    border: 2px solid #f5f5f5;
42    padding: 15px 32px;
43    border-radius:50px;
44}
45
46.contact-btn:hover{
47    color:#010204;
48    background-color:white;
49    transition:0.5s;
50    text-decoration:none;
51}
52
53.sub-title::after{
54    content: "|";
55    animation:blink 0.7s infinite;
56
57}
58
59@keyframes blink{
60    50% {opacity:0;}
61}

jQuery
1$(function() {
2
3    /*****************************タイピング風*****************************/
4    $(".sub-title").typed({
5        strings:["コーディングであなたの想いを「カタチ」にします。","Let`s scroll down."],
6        typeSpeed:50,
7        startDelay:1000,
8        backSpeed:20,
9        loop:true,
10        loopCount:5,
11        showCursor: false,
12        backDelay:1000
13    });
14
15    /*****************************スライドショー*****************************/
16    $('.main').vegas({
17        slides: [
18            { src: 'img/bgc016.jpg' },
19            { src: 'img/bgc015.jpg' },
20            { src: 'img/bgc009.jpg' }
21        ],
22            delay: 5000,
23            transitionDuration: 2000,
24            transition: 'fade',
25        });
26});
27

試したこと

スライドショーを追加したことにより、デベロッパーツール上に新たなclass名が生成されておりました。
なので、「margin:0 auto;」を変更しましたが解決できませんでした。

補足情報（FW/ツールのバージョンなど）

■使用しているプラグイン
Vegas2：https://vegas.jaysalvat.com/
タイピング風アニメーション：https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.1/typed.min.js

行動規範の内容に同意します

回答2件

ベストアンサー

こんにちは、
まず、中央寄せの件ですが、CSSに以下を追加してみたらどうでしょう？

CSS
1.vegas-wrapper {
2    display: contents;
3}

次にタイピング風アニメーションの件ですが、以下のように
スライドショーのプラグインのメソッド、タイピング風のメソッドのにしてみたらどうでしょう？

jQuery
1$(function() {
2    /*****************************スライドショー*****************************/
3    $('.main').vegas({
4        slides: [
5            { src: 'img/bgc016.jpg' },
6            { src: 'img/bgc015.jpg' },
7            { src: 'img/bgc009.jpg' }
8        ],
9            delay: 5000,
10            transitionDuration: 2000,
11            transition: 'fade',
12        });
13
14    /*****************************タイピング風*****************************/
15    $(".sub-title").typed({
16        strings:["コーディングであなたの想いを「カタチ」にします。","Let`s scroll down."],
17        typeSpeed:50,
18        startDelay:1000,
19        backSpeed:20,
20        loop:true,
21        loopCount:5,
22        showCursor: false,
23        backDelay:1000
24    });
25});