пролет Центр вертикально

Question

Я этот код:

a { 
 
    background: #A9A9A9; 
 
    display: block; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    height: 100%; 
 
    width: 20%; 
 
    vertical-align: middle; 
 
    float: right; 
 
    text-align: center; 
 
} 
 
a span { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
}

<a href="#"><span>Center</span></a>

Я хочу, чтобы центр по вертикали на span в a, который находится в position: absolute;.

Answer 1

Используйте position:relative, чтобы охватить и дать top:50%

a { 
 
\t background: #A9A9A9; 
 
\t display: block; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    height: 100%; 
 
    width: 20%; 
 
    vertical-align: middle; 
 
\t float: right; 
 
\t text-align: center; 
 
} 
 

 
a span { 
 
    display: inline-block; 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translate(0px, -50%); 
 
}

<a href="#"><span>Center</span></a>

Решение 2:

использование display:table и display:table-cell.

a { 
 
    background: #A9A9A9; 
 
    display: block; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    height: 100%; 
 
    width: 20%; 
 
    vertical-align: middle; 
 
    float: right; 
 
    text-align: center; 
 
    display:table; 
 
} 
 
a span { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
}

<a href="#"><span>Center</span></a>

Answer 2

a { 
 
\t background: #A9A9A9; 
 
\t display: block; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    height: 100%; 
 
    width: 20%; 
 
    vertical-align: middle; 
 
\t float: right; 
 
\t text-align: center; 
 
} 
 

 
a span { 
 
    position: absolute; 
 
    margin: auto; 
 
    left: 0; 
 
    right: 0; 
 
    top: 50%; 
 
    bottom: 0; 
 
    height: 16px; 
 
    margin-top: -8px; /* height/2 */ 
 
}

<a href="#"><span>Center</span></a>

Answer 3

Большой случай использования для Flexbox. Просто убедитесь, что вы проверить префиксы поставщика и поддержку Broswer:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

a { 
 
\t background: #A9A9A9; 
 
\t display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    height: 100%; 
 
    width: 50%; 
 
} 
 

 
a span { 
 
    
 
}

<a href="#"><span>Center</span></a>

Answer 4

изменения в стиле может помочь вам

a { 
    background: #A9A9A9; 
    display: table; 
    position: absolute; 
    right: 0; 
    top: 0; 
    height: 100%; 
    width: 20%; 
    vertical-align: middle; 
    float: right; 
    text-align: center; 
} 

a span { 
    display: table-cell; 
    vertical-align: middle; 
} 

<a href="#"><span>Center</span></a>