我怎样才能使我的 div 内容以 css 为中心？答案

【问题标题】：How i can center my div content with css?我怎样才能使我的 div 内容以 css 为中心？
【发布时间】：2016-03-23 01:11:14
【问题描述】：

实际上我用这个 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，但我做不到。有人知道吗？

【问题讨论】：

您的 html 与您发布的 CSS 不匹配。您的 HTML 中没有 #FormPart2。此外，至少有 1 个 div 标签未关闭。

标签： html css

【解决方案1】：

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

用途：

text-align: center;

请尝试让实时“代码 sn-p”更容易让其他开发人员快速编辑您的代码并查看它是否有效。

【讨论】：

【解决方案2】：

要使父 div 居中，需要在添加边距之后设置宽度：0 auto

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

【讨论】：