PureCSSを使用してグリッド幅内のオブジェクトを中心にする

Question

私は、レイアウトの作成を開始できるようにPureCSSが組み込まれたhtmlテンプレートを持っています。私は24の分割されたグリッドの20-24幅のオブジェクトを持っています。グリッドブロック内にフォームがあります。そのグリッド内にフォームコンテンツを中央に配置したいと思います。私は効果的な方法でそれを行う方法がわかりません。私は自分のcssを追加して純粋なCSSのデフォルトを上書きしようとしましたが、それは誰も私を助けてくれません。これは私がHTMLテンプレートのために持っているものである：ここでは

<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous"> 
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 

    <div class="pure-g"> 
    <div class="pure-u-lg-20-24 center-item-h"> 
     <form action="{% url 'searched' %}" method="POST"> 
     {% csrf_token %} 
     <input type="text" name="searched" placeholder="Search"> 
     </form> 
    </div> 
    </div> 

は私が手動でブロック内のフォームを中央に使用しようとしたCSSです：ここでは

.center-item-h { 
    margin-left: auto !important; 
    margin-right: auto !important; 
} 

それは次のようになります。

私は、問題のブロックではないすべてのコードをすべて削除しました。この回答を解決するために必要ならば、すべてのコンテンツを追加することができます

Answer 1

マージンを使用して水平方向に中心を設定するには、widthを要素に設定する必要があります。さもなければ、それ自身の間隔を決める方法を知らないでしょう。また

.center-item-h { 
    margin: 0 auto; 
    width: 50%; /* just an arbitrary amount */ 
} 

（とできれば）、flexboxに切り替えると、ちょうどその親に水平配向性を適用します。

.pure-g { 
    display: flex; 
    justify-content: center; 
}