Align button to center does not work

.component {
  width: 200px;
  height: 200px;
  background-color: #bdc3c7;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
}

.btn {
  width: 80px;
  height: 35px;
  padding: 10px;
  background-color: #27ae60;  
  color: white;
}

.btn:hover {
  color: #ecf0f1;
  background-color: #2ecc71;
}

<div class="component">
    <button class="btn">Button</button>
</div>

@charset "utf-8";
/* CSS Document */

img {
	border: 0;
	max-width: 100%;
}

label {
	line-height: 40px;
	display: inline-block;
	vertical-align: middle;
}

select {
	width: 110px;
	height: 50px;
}

.typeTextGrande, .typeTextMedio, .typeTextPequeno {
	height: 36px;
	padding: 9px;
}

.typeTextPequeno {
	width: 150px;
}

.typeTextMedio {
	width: 250px;
}

.typeTextGrande {
	width: 450px;
}

.labelPequeno {
	width: 100px;
}

.labelMedio {
	width: 200px;
}

.labelGrande {
	width: 300px;
}

.h1Centralizado, .h1CentralizadoAvisos {
	width: 100%;
	line-height: 50px;
	text-align: center;
}

button.btnPecaGas {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: right;
	width: 208px;
	height: 44px;
}


button.btnPecaGas {
	background-image: url(../../_img/botijao.png);
}



div.sessoes {
	width:1000px;
	margin: auto;
	position: relative;
}

.encomende {
	cursor:pointer;
}

div.pecaGas {
	width:40px;
	background-color: rgb (255,0,0);	
	z-index:10;
}

div.pecaGas div.gas {
	display:block;
	position:absolute;
	top:0;
	right:0;	
}

div.peca {
	display:block;
	width:420px;
	top:calc(50% - 270px);
	right:0;	
	background-color:rgb(255,255,255);
	border: .5px rgb(255,0,0) solid;	
   -webkit-border-radius: 20px 0 0 20px;
   -moz-border-radius: 20px 0 0 20px;
    border-radius: 20px 0 0 20px;	
	z-index:10;   
	padding:20px 0 20px 20px;
}

div.peca input, div.peca select {
	width: 250px  !important;;
	border: 1px rgb(255,0,0) solid;
}

div.peca button.fechaPeca {
	position:absolute;
	top:20px;
	right:20px;
	background-color:transparent !important;
}

div.peca button.btnPecaGas {
	margin:auto  !important;
	text-align:center !important;
}

div.peca .labelPequeno {
	width:120px !important;
}

.btn{
display: flex;
  align-items: center;
  justify-content: center;
}

<div class="peca">
  <button class="fechaPeca"><img src="_img/btn-close.png" /></button>
  <h1 class="h1Centralizado">Peça suas botijas</h1>
  <label for="nomePeca" class="labelPequeno">Nome</label>
  <input type="text" name="nomePeca" id="nomePeca" class="typeTextPequeno" placeholder="Nome"  required />
  <br />
  <br />
  <label for="enderecoPeca" class="labelPequeno">Endereço</label>
  <input type="text" name="enderecoPeca" id="enderecoPeca" class="typeTextPequeno" placeholder="Endereço completo" required  />
  <br />
  <br />
  <label for="bairroPeca" class="labelPequeno">Bairro</label>
  <select name="bairroPeca" class="typeTextPequeno" required>
    <option value="">Selecione o bairro</option>
  </select>
  <br />
  <br />
  <label for="telefonePeca" class="labelPequeno">Telefone</label>
  <input type="text" name="telefonePeca" id="telefonePeca" class="typeTextPequeno" placeholder="Telefone"  />
  <br />
  <br />
  <label for="quantidadePeca" class="labelPequeno">Quantas botijas?</label>
  <input type="text" name="quantidadePeca" id="quantidadePeca" class="typeTextPequeno" placeholder="Quantas Botijas"  />
  <br />
  <br />
  <div class="btn">
  <button class="btnPecaGas">Peça já o seu</button>
  </div>
</div>