html - 如何居中相对div？

Question

我一直试图让下面的代码工作几个小时，但没有成功......你能帮我让元素 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>

Answer 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;}

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

对于 #projects带有图像的面板，花车会让你陷入困境 居中。

关于 #pr_one和 #pr_two , 添加 text-align: center然后使用 display: inline-block在 .pr_img ，这将使您的图像居中对齐(给/取一些边距)，然后应用合适的宽度，例如 30%以便图像自动缩放以形成一行三个。

现在的技巧是应用 display: inline-block到图像 ( .pr_img img ) 所以你 现在可以使用边距来控制顶部/底部/左侧/右侧间距。

参见演示:http://jsfiddle.net/audetwebdesign/rmtpy6t0/

注意:您还有一些工作要做，但至少这澄清了与居中和 float 元素相关的问题。

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