Cannot centralize div on bootstrap - css

Question

I'm trying to centralize the div "Status" using css. Already tryied to use vertical-align: middle, display: flex, align-item: center and nothing works. Can someone help me? it seens like the height of the div remains the same so I can't centralize it since it's content fills it's exactly entire space.
import React from 'react'
import { Row, Col } from 'reactstrap'
import styled from 'styled-components'
import Status from './Status'
export default ({ temporadas = [], temporadaSelecionada = {}, onChange = () => {} }) => {
return (
<StyledContainer>
<Row>
<Col md={12}>
{temporadas.map(temporada => {
return (
<StyledCard selected={temporadaSelecionada.codigo === temporada.codigo}
onClick={() => onChange(temporada)}>
<Status className='pull-right' style={{ marginRight: '-8px' }} ativa={temporada.status === 'A'} />
{/* <StyledIcon className={temporadaSelecionada.codigo === temporada.codigo ? 'fa fa-fw fa-minus' : 'fa fa-fw fa-plus'} /> */}
<StyledText alt={temporada.descricao} title={temporada.descricao}>{temporada.descricao || '-'}</StyledText>
</StyledCard>
)
})}
</Col>
</Row>
</StyledContainer>
)
}
const StyledContainer = styled.div`
margin-bottom: 10px;
`
const StyledCard = styled.div`
cursor: pointer;
padding: 16px;
display: block;
border: 1px solid #DADFEA;
background-color: #F4F7FA;
font-size: 100%
&:not(:first-child) {
margin-top: -1px;
}
&:last-child {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
${({ selected }) => selected && `
border-left: 5px solid #C5CBD9;
padding-left: 12px;
`}
`
const StyledText = styled.span`
margin: 0;
`
const StyledIcon = styled.i`
font-size: 10px;
`
The div "Status" is imported from another file and it behaves like this:
import React from 'react'
import styled from 'styled-components'
export default ({ ativa, label, ...props }) => {
if (ativa) {
return (
<div {...props}>
<StyledText>
<StyledLabel>{label}</StyledLabel>
<i class='fa fa-fw fa-circle text-success' />
<span>Ativa</span>
</StyledText>
</div>
)
} else {
return (
<div {...props}>
<StyledText>
<StyledLabel>{label}</StyledLabel>
<i class='fa fa-fw fa-circle text-danger' />
<span>Inativa</span>
</StyledText>
</div>
)
}
}
const StyledText = styled.small`
text-transform: none;
`
const StyledLabel = styled.span`
color: #79919D;
`
I want to put that div in the vertical-center of the row it is contained in. Can someone help me?

Answer 1

You can try this way.
<div className=" centeredDiv">
<status></status>
<div>
.centeredDiv{
display:flex;
justify-content:center;
align-items:center;
}