试图在网页的正中间获取 Twitter 提要答案

【问题标题】：Trying to get Twitter Feed in the Exact Middle of the Webpage试图在网页的正中间获取 Twitter 提要
【发布时间】：2017-02-23 07:33:42
【问题描述】：

我正在尝试将我的 Twitter 提要放在网页的正中间，不幸的是我不知道为什么，但它一直停留在网页的顶部。

有人帮我解决这个问题吗？

问题位于：http://www.falconesports.club/news.html

CSS：

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

【问题讨论】：

标签： html css twitter

【解决方案1】：

有很多方法可以做到这一点，但我最喜欢的是使用 flexbox，因为它不仅可以水平居中而且垂直居中。

这里有一个很好的 flexbox 教程：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

在您的情况下，您需要将这些样式应用于这两个类。

.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;
}

去掉你通过内联和通过 .twitter-timeline 类应用到 iframe 的所有边距，同时删除左边：50%，只留下边距：自动。

【讨论】：

【解决方案2】：

这里是使您的 twitter 提要居中的代码。但首先您需要覆盖 iframe 的样式。由于它的位置值是静态的，与您的风格有些冲突。

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

【讨论】：