如何使用css居中显示div内容？

Question

实际上我正在用这个HTML创建一个表单：

<div id="AdvanceSearch">

    <div id="FormPart1">

        <form class="form-horizontal" role="form">

            <div class="form-group">

                <label class="col-lg-2 control-label"> <a class="FontStyle">Palabras clave</a> </label>
                <div class="col-lg-10">
                    <input type="text" class="form-control" id="InputWord" placeholder="sofrito">
                </div>

            </div>

        </form>


        <form class="form-horizontal" role="form">
            <div class="form-group">
                <label class="col-lg-2 control-label"> <a class="FontStyle">Ingredientes</a> </label>
                <div class="col-lg-10">
                    <input type="text" class="form-control" id="InputWord2" placeholder="tomate, cebolla, zanahoria...">
                </div>
            </div>
        </form>
    </div>

还有这个CSS：

#AdvanceSearch{
    background-color:#9CDEC6;
    height: auto;
    width: 100%;
    display: none;
    padding-top: 30px;
    border-radius: 0px 0px 60px 60px;
}

#FormPart1{
    margin: -9px auto;
    width: 100%;
    height: 100px;
}
#FormPart2{
    display: inline;
    box-sizing: border-box;
}

div FormPart1包含两个div：

FormPart1和FormPart2。对于任何问题，内容都不在中心。我正在试着使用margin left:auto和margin right:auto，但我做不到。有人知道吗？

Answer 1

如果它只是文本和/或按钮。

使用：

text-align: center;

请尝试制作一个实时的“代码片段”，这样其他开发人员可以更容易地快速编辑您的代码，并查看它是否工作。

Answer 2

要居中您的父div需要设置宽度后，添加边距:0自动

CSS

/* TO MAKE CENTER YOUR CHILD ELEMENT. YOU NEED TO SET WIDTH YOUR PARENT DIV AND THEN
WRITE MARGIN: 0 AUTO; */

#AdvanceSearch {
  width:100px;
  margin: 0 auto;
}

DEMO