Вы можете добавить достаточное поле вокруг кнопки, чтобы размеры окна кнопки (ширина + 2 * поле) суммировались с размером элемента div. Это, кажется, немного от agile: измените любой из размеров, и вам придется поиграться с другими свойствами, чтобы сохранить отношения.
IIU C (я также изучаю это), в настоящее время рекомендуется использовать гибкую коробку.
@font-face {
font-family: Montserrat;
src: url("Montserrat_Light.otf") format("opentype");
}
body{
background-color: #c3c8c0;
}
button {
font-family: Montserrat;
font-size: 36px;
color: #38332b;
border-radius: 60px;
border: 2.2px solid transparent;
background: linear-gradient(#d8d8d8, #d0d0d0), linear-gradient(#fefcfc, #a8a4a9 60%);
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
box-shadow: 0px 1px 0px 1px #fec75a, 0px 20px 20px 2px #b79d89, 0px 0px 20px 10px #d6cbc6; /*d6cbc6 c8c3c0*/
height: 120px;
width: 120px;
}
button:focus{
outline: none;
}
.buttonholder{
height: 160px;
width: 160px;
border-radius: 80px;
background: #c3c8c0;
box-shadow: 0px 0px 2px 1px #d6d0cc;
/* added to make the container a flex box and center its content */
display: flex;
justify-content: center;
align-items: center
}
<div class="buttonholder">
<button>
21
</button>
</div>
Свойство display:flex приводит к тому, что div .buttonholder выглядит как flex-box. Возможности гибкого блока включают в себя простые средства для центрирования контента по горизонтали, используя justify-content:center;, и для центрирования контента по вертикали, используя align-items:center;.
Если вам требуется поддержка старых браузеров, которые не поддерживают поддержка display:flex, другой подход будет использовать абсолютное позиционирование кнопки относительно содержащего div в сочетании с переводом:
@font-face {
font-family: Montserrat;
src: url("Montserrat_Light.otf") format("opentype");
}
body{
background-color: #c3c8c0;
}
button {
font-family: Montserrat;
font-size: 36px;
color: #38332b;
border-radius: 60px;
border: 2.2px solid transparent;
background: linear-gradient(#d8d8d8, #d0d0d0), linear-gradient(#fefcfc, #a8a4a9 60%);
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
box-shadow: 0px 1px 0px 1px #fec75a, 0px 20px 20px 2px #b79d89, 0px 0px 20px 10px #d6cbc6; /*d6cbc6 c8c3c0*/
height: 120px;
width: 120px;
/* added to get centered positioning */
margin:0;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
button:focus{
outline: none;
}
.buttonholder{
height: 160px;
width: 160px;
border-radius: 80px;
background: #c3c8c0;
box-shadow: 0px 0px 2px 1px #d6d0cc;
/* added to use absolute positioning of content relative to the holder */
position:relative;
}
<div class="buttonholder">
<button>
21
</button>
</div>
Я думаю, что это может быть более надежным.
Объяснить: position:absolute для кнопки обеспечивает позиционирование относительно ближайшего расположенного предка. Добавление position:relative в .buttonholder делает div позиционируемым элементом, но без каких-либо дополнительных CSS не меняет его положение.
Назад к кнопке: установка значения top / left на 50% устанавливает верхний левый угол кнопки на половину поперек / вниз по ширине / высоте div - для текущего размера div, (80 , 80), но это автоматически отрегулируется, если вы измените размер div. А затем transform: translate(-50%, -50%) перемещает кнопку назад наполовину. Конечный результат заключается в том, что кнопка центрируется внутри элемента div и остается в центре, даже если вы измените размеры кнопки или элемента div.