如何使一系列href居中，同时允许其换行？

<style>
    .container {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    .container a {
        margin: 10px;
    }
</style>

<div class="container">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
    <a href="#">Link 5</a>
    <!-- 更多的href元素 -->
</div>

<style>
    .container {
        text-align: center;
    }
    .container a {
        display: inline-block;
        margin: 10px;
    }
</style>

<div class="container">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
    <a href="#">Link 5</a>
    <!-- 更多的href元素 -->
</div>