试图将Twitter Feed放在网页的精确中间位置

Question

我正在尝试将我的Twitter订阅源放在网页的正中间，遗憾的是我不知道为什么会这样，但它仍然贴在网页的顶部。

有人帮我这个吗？

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

CSS：

mockService.Setup()

Answer 1

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

这是一个关于flexboxes的好教程：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％并保留margin：auto。

Answer 2

以下是将您的Twitter Feed设为中心的代码。但首先，您需要覆盖iframe的样式。因为它的位置值是静态的，与你的风格有些冲突。

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