ウェブページの真ん中でTwitterフィードを取得しようとしています

Question

私は自分のTwitterフィードをウェブページの真ん中に入れようとしていますが、残念ながら私は理由はわかりませんがウェブページのトップに固執しています。

誰かがこれを手伝ってくれますか？

問題が配置されています。http://www.falconesports.club/news.html

CSS：

.twitter-timeline {  
position: fixed; 
margin-top: 50%; 
margin-left: 50%; 
margin-right: 50%; 
}   

Answer 1

ありますが、これを実現することができな方法の束があるが、それは水平方向にのみ、それを中央にしませんので、私のお気に入りは、フレキシボックスを使用することですが、縦にも。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

あなたはこの2つのクラスにこれらのスタイルを適用する必要があり、この作品を作るために、あなたのケースで：

はここflexboxesに良いチュートリアルです。 50％をわずか余白を残す：

.fadein.two { 
    width: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    display: flex; 
    align-items: center; 
    align-content: center; 
} 

.twitter-timeline { 
    /* position: fixed; */ 
    /* left: 50%; */ 
    /* margin-top: 100px; */ 
    /* margin-left: 600px; */ 
    margin: auto; 
} 

あなたはiframeの両方のインラインにし、.twitter-タイムラインのクラスを介して適用しても左を削除している余白のすべてを脱いで自動。

Answer 2

あなたのtwitterフィードを中央に作るためのコードです。しかし、まずiframeのスタイルをオーバーライドする必要があります。その位置の値は静的なので、スタイルと競合します。

position: fixed; 
left: 0; 
right: 0; 
top: 0; 
bottom: 0; 
margin: auto;