Центр и дно Div

Question

Я хочу центрировать мой значок шрифта в нижней части div. Я знаю, что я мог бы установить его на задний план и использовать нижний: 0, но я не могу получить margin: auto, чтобы центрировать его по обе стороны.

Вот мой код:

<section> 
     <p><i class="fa fa fa-arrow-circle-o-down"></i></p> 
</section> 

section { 
background: url("../img/background.jpg") no-repeat center center fixed; 
background-size: 100%; 
background-color: black; 
height: 100%; 
position: relative; 
} 


section p i { 
    position: absolute; 
    color: white; 
    font-size: 15em; 
    bottom:0 
} 

Answer 1

Вы значок представляет собой текст, так что вы можете использовать свойство text-align: center;.

A jsfiddle sample. Я внес некоторые изменения в код.

HTML

<section> 
    <p><i>☺</i></p> 
</section> 

CSS

section { 
    background: black url("http://placehold.it/420x150") no-repeat center center; // you can put the background-color here by the way 
    background-size: 100%; 
    height: 150px; 
    width: 100%; 
    position: relative; 
    text-align: center; // magic stuff here ! 
} 

section p i { 
    position: absolute; 
    color: red; 
    font-size: 2em; 
    bottom: 0; // you forget a ';' here 
} 

Это то, что вы ищете?