My current approach involves using display: flex
to center an item within its container. I've found success by utilizing the justify-content
and align-items
properties (method 1).
While exploring the flexbox documentation, I noticed that most concepts have both horizontal and vertical variations. However, when attempting to center items by swapping the axes on everything (method 2), it doesn't quite yield the desired outcome. What is causing this discrepancy?
<table>
<tr>
<th>METHOD1</th>
<th>METHOD2</th>
</tr>
<tr>
<td><div class="outer center-method-1"><div class="inner"></div></td>
<td><div class="outer center-method-2"><div class="inner"></div></td>
</tr>
</table>
<style>
table {
border-spacing: 10px;
}
.outer {
background-color: #ddd;
width: 100px;
height: 100px;
}
.inner {
background-color: #f00;
width: 20px;
height: 20px;
}
.center-method-1 {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.center-method-2 {
display: flex;
flex-direction: column;
align-content: center;
justify-items: center;
}
</style>