【问题标题】：How to set align of elements to center with css?如何将元素对齐设置为使用css居中？
【发布时间】：2016-02-25 07:40:57
【问题描述】：

我尝试将存在于带有深色类的 div 标签中的元素对齐设置为居中。我有一个图像和一个带有 img-circle 类的 div 元素，它们大部分位于中心（垂直、水平）。请指教。
请参阅

上的演示

http://jsfiddle.net/hmahdavi921/94nfxyz8/

css:

 .img-circle img {
    top: 50%;
    left: 50%;
    border: 6px solid #b9b7b7;
    -ms-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
    -ms-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);

}

.dark {
    position: relative;
    z-index: 2;
    overflow: hidden;

}

div.dark:after {
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;
    height: 100%;
    width: 100%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 0px 0px 0px 200px rgba(0, 0, 0, 0.3);
    -ms-box-shadow: 0px 0px 0px 200px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 0px 200px rgba(0, 0, 0, 0.3);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

div.dark:hover:after {
    height: 0%;
    width: 0%;
}

html:

<div class="dark img-circle">
    <div>

        <div id="dnn_ctr428_ContentPane" class="img-circle">
            <h3>نام من</h3>
            <p>توضیحات من </p>
            <button class="btn btn-primary">بیشتر ...</button>
        <!-- Start_Module_428 --><div id="dnn_ctr428_ModuleContent" class="DNNModuleContent ModDNNHTMLC">
    <div id="dnn_ctr428_HtmlModule_lblContent" class="Normal">
    <img class="img-responsive" alt="" src="http://www.dnnskin.net/portals/631/team3.png" height="279" width="446">
</div>

</div><!-- End_Module_428 --></div>
    </div>
</div>

如果你需要改变这个标签的位置

 <h3>نام من</h3>
            <p>توضیحات من </p>
            <button class="btn btn-primary">بیشتر ...</button>

做吧，没问题

【问题讨论】：

标签： html css

【解决方案1】：

将暗类顶部改为60%

CSS：

.dark{ top: 60%; }

图片的左边距为 40px

CSS：

.img-responsive{ margin-left: 40px; }

或

.img-responsive{ margin-left: 7%; }

【讨论】：

这不是真的。您可以在页面顶部的 jsfiddle 链接上进行测试
附上截图供大家参考。实际上，您的图像放置在表单控件之后，除非您提供绝对位置值，否则图像不能与其重叠。我所做的是，只是将叠加层（暗类）向下移动到其中的中心图像。我希望这有帮助！！！
参考：dnnskin.net/DesktopModules/ArtStore/Templates/ProductDetail/…

【解决方案2】：

现在习惯了这样的css。

.Normal{
position:absolute;
    left:0;right:0;top:50%;margin-top:-145px;bottom:0;text-align:center;
}
html body, html, .dark{height:100%;}

演示

.Normal{
position:absolute;
    left:0;right:0;top:50%;margin-top:-145px;bottom:0;text-align:center;
}
html body, html{height:100%;}

.img-circle img {
    border: 6px solid #b9b7b7;
    -ms-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
    -ms-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);

}

.dark {
    position: relative;
    z-index: 2;
    overflow: hidden;
    height:100%;
    
}

div.dark:after {
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;
    height: 100%;
    width: 100%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 0px 0px 0px 200px rgba(0, 0, 0, 0.3);
    -ms-box-shadow: 0px 0px 0px 200px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 0px 200px rgba(0, 0, 0, 0.3);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

div.dark:hover:after {
    height: 0%;
    width: 0%;
}

<div class="dark img-circle">
    <div>

        <div id="dnn_ctr428_ContentPane" class="img-circle">
            <h3>نام من</h3>
            <p>توضیحات من </p>
            <button class="btn btn-primary">بیشتر ...</button>
        <!-- Start_Module_428 --><div id="dnn_ctr428_ModuleContent" class="DNNModuleContent ModDNNHTMLC">
	<div id="dnn_ctr428_HtmlModule_lblContent" class="Normal">
	<img class="img-responsive" alt="" src="http://www.dnnskin.net/portals/631/team3.png" height="279" width="446">
</div>

</div><!-- End_Module_428 --></div>
    </div>
</div>

=================================

更新的演示

.Normal, .imgText{
position:absolute;
    left:0;right:0;top:50%;margin-top:-145px;bottom:0;text-align:center;
}
.imgText{
    z-index:9;top:50%;margin-top:-57px;
    
}
html body, html{height:100%;}

.img-circle img {
    border: 6px solid #b9b7b7;
    -ms-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
    -ms-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);

}

.dark {
    position: relative;
    z-index: 2;
    overflow: hidden;
    height:100%;
    
}

div.dark:after {
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;
    height: 100%;
    width: 100%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 0px 0px 0px 200px rgba(0, 0, 0, 0.3);
    -ms-box-shadow: 0px 0px 0px 200px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 0px 200px rgba(0, 0, 0, 0.3);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

div.dark:hover:after {
    height: 0%;
    width: 0%;
}

<div class="dark img-circle">
    <div>

        <div id="dnn_ctr428_ContentPane" class="img-circle">
        <!-- Start_Module_428 -->
            
            <div id="dnn_ctr428_ModuleContent" class="DNNModuleContent ModDNNHTMLC">
   <div class="imgText">   
            <h3>نام من</h3>
            <p>توضیحات من </p>
            <button class="btn btn-primary">بیشتر ...</button>
  </div>
	            <div id="dnn_ctr428_HtmlModule_lblContent" class="Normal">
	                <img class="img-responsive" alt="" src="http://www.dnnskin.net/portals/631/team3.png" height="279" width="446" />
                </div>

        </div><!-- End_Module_428 -->
            
    </div>
    </div>
</div>

【讨论】：

在这种情况下 h3 ，p 和 button 标签的位置在左边。这些元素大部分位于图像的中心

【解决方案3】：

我有一个简单的解决方案 1-添加具有绝对位置的新div

        <h3>نام من</h3>
        <p>توضیحات من </p>
        <button class="btn btn-primary">بیشتر ...</button>

新代码

<div style="position:absolute; width: 100%;text-align: center">
        <h3>نام من</h3>
        <p>توضیحات من </p>
        <button class="btn btn-primary">بیشتر ...</button>
</div>

2- 添加样式tyle="text-align: center;"到 id 为 dnn_ctr428_HtmlModule_lblContent 的 div

<div id="dnn_ctr428_HtmlModule_lblContent" class="Normal" style="text-align: center;">

See demo here

【讨论】：

好的。图片放置在页面中心，但新 div 最常放置在页面中心，如图片。如果您需要更改新 div 的位置及其元素，您可以这样做
只需添加：宽度：100%；文本对齐：居中；到新的 div