text-align:center 不能完美居中我的 Font Awesome 图标

Question

我想在我的 div #first 中将 Font Awesome 中的向下箭头图标居中。 name 居中，descr 也是，但是当我想将arrow 的内容居中时，它不起作用..

这是我的 HTML：

<div id="first">
    <div class="name">My Name</div>
    <div class="descr">Web Dev</div>
    <div class="arrow">
        <a class="scrollTo" href="#second">
            <i class="fa fa-arrow-down fa-4x"></i>
        </a>
    </div>
</div>

这是我的 CSS：

body
{
    margin:0;
    padding:0;
    background:#252932;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight:400;
}

#first
{
    margin:0 90px 0 90px;
    height:100vh;
    background:#252932;
}

#first .name
{
    padding-top: 25vh;
    color:#fff;
    font-weight: bold;
    font-size:10vh;
    text-align: center;
}

#first .descr
{
    color:#195962;
    text-align: center;
    font-size: 4vh;
}

.arrow
{
    text-align:center;
}

.arrow i
{
    color:#fff;
    position:absolute;
    bottom:80px;
    transition:all 0.5s ease;
}

我想修复页面底部的箭头，这就是我使用position:absolute; bottom:80px 的原因。但是这些属性似乎破坏了我的展示。

Answer 1

        *, *:before, *:after {
          box-sizing: border-box;
        }

        html{
            height:100%;
        }

        body
        {
            margin:0;
            padding:0;
            background:#252932;
            font-family: 'Source Sans Pro', sans-serif;
            font-weight:400;
        }

        #first
        {
            margin:0 90px 0 90px;
            min-height:100%;
            background:#252932;
            display:relative;
        }

        #first .name
        {
            padding-top: 25vh;
            color:#fff;
            font-weight: bold;
            font-size:10vh;
            text-align: center;
        }

        #first .descr
        {
            color:#195962;
            text-align: center;
            font-size: 4vh;
        }

        .arrow
        {

            background-color:blue;
            position: absolute;
            bottom:80px;
            left: 50%;
            display: block;
            width: 80px;
            height: 80px;
            margin-left: -40px;
            text-align: center;
            cursor: pointer;
        }

        .arrow a{
            display:block;
        }

        .arrow i
        {
            color:#fff;
            background-color:red;
            transition:all 0.5s ease;
            line-height:80px;
            text-align:center;

        }