<style>
.containerOne {
width: 100px;
height: 100px;
padding: 10px;
border: solid 2px black;
border-radius: 50%;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.w100 {
width: 100px;
}
.h100 {
height: 100px;
}
.p10 {
padding: 10px;
}
.b2b {
border: solid 2px black;
}
.br50pc {
border-radius: 50%;
}
.df {
display: flex;
}
.fd-c {
flex-direction: column;
}
.jc-c {
justify-content: center;
}
.ta-c {
text-align: center;
}
</style>
<div id="containerOne" class="containerOne">
CONTAINER ONE
</div>
<div id="containerTwo" class="w100 h100 p10 b2b br50pc df fd-c jc-c ta-c">
CONTAINER TWO
</div>
<style>
.containerOne {
width: 100px;
height: 100px;
padding: 10px;
border: solid 2px black;
border-radius: 50%;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.w100 {
width: 100px;
}
.h100 {
height: 100px;
}
.p10 {
padding: 10px;
}
.b2b {
border: solid 2px black;
}
.br50pc {
border-radius: 50%;
}
.df {
display: flex;
}
.fd-c {
flex-direction: column;
}
.jc-c {
justify-content: center;
}
.ta-c {
text-align: center;
}
</style>
<div id="containerOne" class="containerOne">
CONTAINER ONE
</div>
<div id="containerTwo" class="w100 h100 p10 b2b br50pc df fd-c jc-c ta-c">
CONTAINER TWO
</div>