如何使相对div居中？答案

【问题标题】：How to center a relative div?如何使相对div居中？
【发布时间】：2017-03-13 19:24:55
【问题描述】：

我一直试图让以下代码工作几个小时，但没有成功...请您帮我将项目 div 居中（即使页面放大和缩小）？

这是我的 HTML 和 CSS：

#bottom {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background-color: #FFF;}
	
#secondsection {
	background-size: 100% auto;
	background-size: cover;
	color: #eaeaf0;
	margin-left: 7%;
	margin-right: 7%;
	padding-top: 35px;
	padding-bottom: 35px;
	position: relative;}

#ss_top {
	width: 100%;
	height: 100%;}

.ss_title {
	display: inline;
	float:left;
	color: #000000;
	font-family: 'Eurostile';
	font-size: 35px;
	text-transform: uppercase;}

.ss_title2 {
	color: #a5a5a5;}

#gallerybutton {
	position: relative;
	display: inline;
	float: right;
	margin-right: 0%;
    margin-top: 50px;
    padding: 20px;
    background-color: #000;
    text-decoration: none;
    border: none;
    color: #FFF;
    text-transform: uppercase;}

#projects {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	max-width: 2000px;
	padding: 175px 0px 0px 0px;}

#pr_one, #pr_two {
	display: block;}

.pr_img {
	float: left;
	display: inline;
	margin-right: 1%;
	margin-bottom: 1%;}

#viewprofilebutton {
	position: relative;
    left: -75px;
    margin-left: 50%;
    margin-top: 3.5%;
    margin-bottom: 2.5%;
    padding: 20px;
    background-color: #000;
    text-decoration: none;
    border: none;
    color: #FFF;
    text-transform: uppercase;}

<div id="secondsection">
					
	<div id="ss_top">
		<p class="ss_title">A selection of projects<br /><span class="ss_title2">I've worked on lately</span></p>
			<button type="button" id="gallerybutton">See everything</button>
	</div>

	<div id="projects">
	<div id="pr_one">
		<div class="pr_img"><a target="_blank" href=""><img src="images/pr_nfs.jpg" alt="" width="488px" height="272px"></a></div>
    	<div class="pr_img"><a target="_blank" href=""><img src="images/pr_nfs.jpg" alt="" width="488px" height="272px"></a></div>
        <div class="pr_img"><a target="_blank" href=""><img src="images/pr_nfs.jpg" alt="" width="488px" height="272px"></a></div>
	</div>
	<div id="pr_two">
		<div class="pr_img"><a target="_blank" href=""><img src="images/pr_nfs.jpg" alt="" width="488px" height="272px"></a></div>
		<div class="pr_img"><a target="_blank" href=""><img src="images/pr_nfs.jpg" alt="" width="488px" height="272px"></a></div>
     	<div class="pr_img"><a target="_blank" href=""><img src="images/pr_nfs.jpg" alt="" width="488px" height="272px"></a></div>
	</div>
	</div>

	<a href="#thirdsection"><button type="button" id="viewprofilebutton">See my work</button></a>

</div>

【问题讨论】：

你希望你的图片如何显示，两行三张图片宽？如果是这样，您的页面将大约 3x488 像素宽。请详细说明。
好吧，如果可能的话，我想为小屏幕设置两行宽，为大屏幕设置三行宽。关键是无论我滚入还是滚出，projects div 都会粘在屏幕的左侧...

标签： html css

【解决方案1】：

这是一个开始。看下面的 CSS：

#bottom {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #FFF;}

#secondsection {
    background-size: 100% auto;
    background-size: cover;
    color: #eaeaf0;
    margin-left: 7%;
    margin-right: 7%;
    padding-top: 35px;
    padding-bottom: 35px;
    position: relative;
    border: 1px dotted red;
}

#ss_top {
    width: 100%;
    height: 100%;
    border: 1px dotted blue;
    overflow: auto;
}
#ss_top p {
    margin: 0;
}

.ss_title {
    display: inline-block;
    color: #000000;
    font-family: 'Eurostile';
    font-size: 35px;
    text-transform: uppercase;}

.ss_title2 {
    color: #a5a5a5;}

#gallerybutton {
    position: relative;
    display: inline;
    float: right;
    margin-right: 0%;
    margin-top: 50px;
    padding: 20px;
    background-color: #000;
    text-decoration: none;
    border: none;
    color: #FFF;
    text-transform: uppercase;}

#projects {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    max-width: 2000px;
    padding: 175px 0px 0px 0px;
    border: 1px dashed blue;
}

#pr_one, #pr_two {
    display: block;
    border: 2px dashed blue;
    overflow: auto;
    text-align: center;
}

.pr_img {
    display: inline-block;
    width: 30%;
    margin-right: 1%;
    margin-bottom: 1%;
}
.pr_img img {
    display: inline-block;
    width: 100%;
    height: auto;
}

#viewprofilebutton {
    position: relative;
    left: -75px;
    margin-left: 50%;
    margin-top: 3.5%;
    margin-bottom: 2.5%;
    padding: 20px;
    background-color: #000;
    text-decoration: none;
    border: none;
    color: #FFF;
    text-transform: uppercase;}

我首先去掉了标题中的浮动，#ss_top，你不需要它。

对于带有图像的#projects 面板，浮动让您遇到麻烦居中。

在#pr_one 和#pr_two 上，添加text-align: center，然后在.pr_img 上使用display: inline-block，这将使您的图像居中对齐（留出/留出一些边距），然后应用适当的宽度，例如@ 987654330@ 以便图像自动缩放以形成一排三个。

现在的诀窍是将display: inline-block 应用于图像（.pr_img img），这样你现在可以使用边距来控制上/下/左/右间距。

查看演示：http://jsfiddle.net/audetwebdesign/rmtpy6t0/

注意：您仍有一些改进工作要做，但至少这澄清了与居中和浮动元素相关的问题。

响应式设计：如果您希望根据屏幕尺寸连续显示 2 或 3 张图像，则需要了解媒体查询。但是，由于您在 div 中封装了 3 张图片，因此您被锁定为每行 3 张图片，但这可能没问题。

【讨论】：

非常感谢！这正是我想要的答案！
还有一个问题（抱歉，哈哈）：我的网站上目前有三个部分。第一部分是全屏部分/介绍页面。但是在添加新代码之后，（第二个）项目部分现在浮动在第一部分之上。关于如何解决这个问题的任何想法？
大胆猜测：将 overflow: auto 添加到 CSS 规则中，为您的第一部分的块级父级设置样式。你可能有一些浮动需要限制在父块内。
我刚刚发现问题：我不小心删除了底部 div 之前的 id 符号。现在一切都很好，非常感谢您帮助我！

【解决方案2】：

如果您想将图片居中，请在您的 css 中进行更改：

.pr_img {
  /* float: left; */
  display: block;
  /* margin-right: 1%; */
  /* margin-bottom: 1%; */
  margin: 0 auto;
}

【讨论】：

【解决方案3】：

不使用 margin-left:auto 和 margin-right:auto 添加 margin:auto

#projects {
    position: relative;
    margin:auto;
    max-width: 2000px;
    padding: 175px 0px 0px 0px;
  }

【讨论】：

【解决方案4】：

.pr_img {
  display: block;
  margin: 0 auto;
}

告诉我它是否有效

编辑：是的。

作品:) http://jsfiddle.net/max7j84m/

【讨论】：

【解决方案5】：

  .pr_img {
  text-align: center;
  left: 0;
  right: 0;
  display: block;
  margin: 0 auto;
}

这对我有用

【讨论】：