CSS-將3列布局居中<ul>

Question

我有一個通過調用API生成的清單-每個頁面的清單限制為30個，並且每列應該有10個清單。

目前，它看起來並不居中，尤其是在更大的屏幕上。 我嘗試了margin：0自動，但沒有任何效果。 我可以手動完成此操作，但該解決方案適用於較大的屏幕，並確保它們響應（在移動設備上為2列，然后為1列）。 如何解決此問題？

CSS：

#native {

 width: 100%;
 margin: auto;
 padding: 0;
 position: relative;
 left: 2%;
}

#native ul {
 list-style: none;
 display: inline-block;
 padding-right: 65px;
}


@media(max-width: 480px){
#native {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
   }
}

@media(max-width: 768px){
#native {
    left: 0;
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
   }
}


 @media (min-width: 1600px)
 {
   #native {

    max-width: 1600px;

   }
   #native ul {

    padding-right: 150px;

   }
}

html / php：

<div id="native" class="margin-top-2x">  
    <ul>
        <?php 
           $i=1;
           foreach ( $model as $d ) { ?>
        <?php if ( !empty ( $d['id'] ) ): ?>
            <li>

                    <a href="<?php echo $this->createUrl ( 'frontend/detailedView' , array( 'id' => $d['id'] ) ) ?>"><?php echo ysUtil::truncate($d['title'], 45) ?></a>

                <br>
            </li>
            <?php endif; ?>
            <?php
            if ( ($i % 10) == 0 ) {
                echo "</ul>";
                echo (end ( $model['id'] ) == $d['id']) ? "" : "<ul>";
            }
            $i++;
            ?>
        <?php } ?>
</div>

Answer 1

這可以通過display flex來完成。

.wrapper {
    display: flex;
}
.column {
    flex: 0 0 33%; // column does not grow or shrink. but takes up 33% of the space
}

Answer 2

#native {
 display: flex;
 justify-content: center;
}