Как установить значок вертикально и горизонтально в центр

Question

Я хочу, чтобы значок был вертикально и горизонтально центрирован на div.

.exhibitor_image_div{ 
 
    width: 200px; 
 
    height: 200px; 
 
    border: thin black solid; 
 
    -webkit-border-radius: 3px ; 
 
    -moz-border-radius: 3px; 
 
    border-radius: 3px; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 

 
.exhibitor_image_default_icon{ 
 
    height: 70px; 
 
    width: 70px; 
 
    margin: 0 auto; 
 
    position:relative; 
 
    top: 50%; 
 
} 
 

 

 
span i { 
 
    font-size: 65px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="exhibitor_image_div"> 
 
    <div class="exhibitor_image_default_icon"> 
 
     <span><i class="glyphicon glyphicon-user"></i></span> 
 
    </div> 
 
</div>

Я дал 50% сверху. но он не вертикально центрирован.

Answer 1

Вы можете использовать CSS-преобразование для перемещения значка на 50% от его высоты и, таким образом, центрировать значок в его родительском элементе.

.exhibitor_image_div { 
 
    width: 200px; 
 
    height: 200px; 
 
    border: thin black solid; 
 
    -webkit-border-radius: 3px ; 
 
    -moz-border-radius: 3px; 
 
    border-radius: 3px; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 
.exhibitor_image_default_icon { 
 
    height: 70px; 
 
    width: 70px; 
 
    margin: 0 auto; 
 
    position:relative; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    // border: thin red solid; 
 
} 
 
span i { 
 
    font-size: 65px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="exhibitor_image_div"> 
 
    <div class="exhibitor_image_default_icon"> 
 
    <span><i class="glyphicon glyphicon-user"></i> </span> 
 
    </div> 
 
</div>

Answer 2

Вы можете использовать удивительное свойство calc, чтобы calculate 50% - image height

Посмотрите на примере, я только ADDE свойства известкова в CSS

.exhibitor_image_div{ 
 
    width: 200px; 
 
    height: 200px; 
 
    border: thin black solid; 
 
    -webkit-border-radius: 3px ; 
 
    -moz-border-radius: 3px; 
 
    border-radius: 3px; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 
.exhibitor_image_default_icon{ 
 
    height: 70px; 
 
    width: 70px; 
 
    margin: 0 auto; 
 
    position:relative; 
 
    top: calc(50% - 35px); 
 
    // border: thin red solid; 
 
} 
 
span i{ 
 
    font-size: 65px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="exhibitor_image_div"> 
 
    <div class="exhibitor_image_default_icon"> 
 
    <span><i class="glyphicon glyphicon-user"></i> </span> 
 
    </div> 
 
</div>

Answer 3

Б CSS transform для горизонтального центра родителя с помощью translateY(-50%)

.exhibitor_image_div{ 
 
    width: 200px; 
 
    height: 200px; 
 
    border: thin black solid; 
 
    -webkit-border-radius: 3px ; 
 
    -moz-border-radius: 3px; 
 
    border-radius: 3px; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 

 
.exhibitor_image_default_icon{ 
 
    height: 70px; 
 
    width: 70px; 
 
    margin: 0 auto; 
 
    position:relative; 
 
    top: 50%; 
 
    // border: thin red solid; 
 
    transform: translateY(-50%); 
 
} 
 

 
span i{ 
 
    font-size: 65px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="exhibitor_image_div"> 
 

 
    <div class="exhibitor_image_default_icon"> 
 
    <span><i class="glyphicon glyphicon-user"></i> </span> 
 
    </div> 
 
</div>

Answer 4

Вы можете использовать display: flex; и flex-direction: column; на родителе и добавить flex-grow: 1; DIV выше и ниже значок. Растущие divs будут равномерно распределять доступное пространство между ними и вертикально центрировать значок.

При этом не имеет значения, насколько большой центрированный div.

browser support

.exhibitor_image_div{ 
 
    width: 200px; 
 
    height: 200px; 
 
    border: thin black solid; 
 
    -webkit-border-radius: 3px ; 
 
    -moz-border-radius: 3px; 
 
    border-radius: 3px; 
 
    margin: 0 auto; 
 
    text-align: center; 
 

 
    /* New */ 
 
    display: flex; 
 
    flex-direction: column; 
 
    } 
 

 
.exhibitor_image_default_icon{ 
 
    height: 70px; 
 
    width: 70px; 
 
    margin: 0 auto; 
 
    position:relative; 
 
    /*border: thin red solid;*/ 
 
} 
 

 

 
span i { 
 
    font-size: 65px; 
 
} 
 

 

 
/* New */ 
 
.flex_grow { 
 
    flex-grow: 1; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<div class="exhibitor_image_div"> 
 
    <div class="flex_grow"></div><!-- HERE --> 
 
    <div class="exhibitor_image_default_icon"> 
 
     <span><i class="glyphicon glyphicon-user"></i> </span> 
 
    </div> 
 
    <div class="flex_grow"></div><!-- HERE --> 
 
</div>

Answer 5

Я нашел эту статью, чтобы быть весьма полезным - https://css-tricks.com/centering-css-complete-guide/

Однако в связи с вашей проблемой конкретно - вам просто нужно добавить 1 строку кода :

.exhibitor_image_default_icon{ 
    height: 70px; 
    width: 70px; 
    margin: 0 auto; 
    position:relative; 
    top: 50%; 
    transform: translateY(-50%); <-- new line of code 
    /* add the browser specific transform */ 
} 

JS скрипка: https://jsfiddle.net/chris2001/orfp8bb4/1/

Answer 6

Минималистичное решение Flexbox: просто добавить к пункту margin: auto (конечно, добавить display: flex к containter). Это будет центрировать элемент как по горизонтали, так и по вертикали. И вам не нужно иметь дело с абсолютно расположенными блоками.

Окончательный код, удалены лишние стили:

.exhibitor_image_div { 
 
    width: 200px; 
 
    height: 200px; 
 
    border: thin black solid; 
 
    -webkit-border-radius: 3px; 
 
    -moz-border-radius: 3px; 
 
    border-radius: 3px; 
 
    margin: 0 auto; 
 
    display: flex; 
 
} 
 

 
.exhibitor_image_default_icon { 
 
    height: 70px; 
 
    width: 70px; 
 
    margin: auto; 
 
} 
 

 
span i { 
 
    font-size: 65px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="exhibitor_image_div"> 
 
    <div class="exhibitor_image_default_icon"> 
 
    <span><i class="glyphicon glyphicon-user"></i></span> 
 
    </div> 
 
</div>