html - HTML フッター コンテンツが中央に配置されていない

Question

ページの下部にあるボタンを中央に配置したい:

<footer>
    <div class="centerContent">
        <input name="submit" type="submit" />
    </div>
</footer>

CSS:

.centerContent {
    text-align: center;
}

footer {
    clear: both;
    height: 100px;
    position: absolute;
    bottom: 0;
}

Cssの「フッター」部分を削除すると、ボタンはもちろんページの下部にはありませんが、少なくともページの水平方向の中央にあります. Css に「フッター」の部分を残すと、ボタンはページの下部にありますが、横方向の中央揃えではなくなります!!! 理由を知っている人はいますか？どうもありがとう。

Answer 1

footer {
bottom: 0;
clear: both;
height: 100px;
position: absolute;
text-align: center;
width: 100%;
}