如何均匀地自动居中放置图像？

Question

我正在试图使图像中心在页面上，并有均匀的空间。当我最小化移动视图的页面时，图像会左移，右侧有一个巨大的空白区域。任何人都知道这是什么原因以及如何解决这个问题？

.portfolio { 
 
    color: #333333; 
 
    background: #f7f7f7; 
 
} 
 

 
.portfolio h2 { 
 
    padding-top: 50px; 
 
    text-align: center; 
 
    margin: 0 auto; 
 
} 
 

 
.portfolio p { 
 
    text-align: center; 
 
    margin-bottom: 0; 
 
    line-height: 1.5em; 
 
    padding-bottom: 30px; 
 
} 
 

 
hr { 
 
    width: 10%; 
 
    margin-bottom: 50px; 
 
} 
 

 
.card-module { 
 
    display: inline-block; 
 
    width: 33%; 
 
    margin-bottom: 30px; 
 
} 
 

 
.card-content { 
 
    position: relative; 
 
    margin: 0 auto; 
 
    max-width: 90%; 
 
} 
 

 
.card-content .content-overlay { 
 
    background: rgba(0, 0, 0, 0.7); 
 
    position: absolute; 
 
    height: 98%; 
 
    left: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    opacity: 0; 
 
    -webkit-transition: all 0.4s ease-in-out 0s; 
 
    -moz-transition: all 0.4s ease-in-out 0s; 
 
    transition: all 0.4s ease-in-out 0s; 
 
} 
 

 
.card-content:hover .content-overlay { 
 
    opacity: 1; 
 
} 
 

 
.card-content, 
 
.content-overlay, 
 
.content-image, 
 
.content-details { 
 
    width: 100%; 
 
} 
 

 
.content-details { 
 
    position: absolute; 
 
    text-align: center; 
 
    top: 50%; 
 
    left: 50%; 
 
    opacity: 0; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    -moz-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
    -webkit-transition: all 0.3s ease-in-out 0s; 
 
    -moz-transition: all 0.3s ease-in-out 0s; 
 
    transition: all 0.3s ease-in-out 0s; 
 
} 
 

 
.card-content:hover .content-details { 
 
    top: 57%; 
 
    left: 50%; 
 
    opacity: 1; 
 
} 
 

 
.content-details h3 { 
 
    color: #fff; 
 
    font-weight: 500; 
 
    font-size: 1.52vw; 
 
    letter-spacing: 0.15em; 
 
    margin-bottom: 0.5em; 
 
    text-transform: uppercase; 
 
} 
 

 
.content-details p { 
 
    color: #fff; 
 
    font-size: 0.8em; 
 
    font-size: 1.2vw; 
 
} 
 

 
.fadeIn-bottom { 
 
    top: 80%; 
 
}

<section class="work" id="work"> 
 
    <div class="portfolio"> 
 
    <h2>Work</h2> 
 
    <p> 
 
     brief description <br> here 
 
    </p> 
 

 
    <hr> 
 

 
    <div class="card-module"> 
 
     <div class="card-content"> 
 
     <div class="content-overlay"></div> 
 
     <img class="content-image" src="http://i.imgur.com/VcoiK3q.jpg"> 
 
     <div class="content-details fadeIn-bottom"> 
 
      <h3 class="content-title">Arsenal Fanpage</h3> 
 
      <p class="content-text">As a highschool project, I made a soccer club fanpage website.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="card-module"> 
 
     <div class="card-content"> 
 
     <div class="content-overlay"></div> 
 
     <img class="content-image" src="http://i.imgur.com/VcoiK3q.jpg"> 
 
     <div class="content-details fadeIn-bottom"> 
 
      <h3 class="content-title">Coding Website Beta</h3> 
 
      <p class="content-text">This was a beta website created to display all my high school work.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="card-module"> 
 
     <div class="card-content"> 
 
     <div class="content-overlay"></div> 
 
     <img class="content-image" src="http://i.imgur.com/VcoiK3q.jpg"> 
 
     <div class="content-details fadeIn-bottom"> 
 
      <h3 class="content-title">Coding Website Launch</h3> 
 
      <p class="content-text">This was the official look of my portfolio website when released for all to see.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="card-module"> 
 
     <div class="card-content"> 
 
     <div class="content-overlay"></div> 
 
     <img class="content-image" src="http://i.imgur.com/VcoiK3q.jpg"> 
 
     <div class="content-details fadeIn-bottom"> 
 
      <h3 class="content-title">Website Resume</h3> 
 
      <p class="content-text">This is my website resume created from scratch.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="card-module"> 
 
     <div class="card-content"> 
 
     <a href="https://www.youtube.com/watch?v=i0eYyobCkGo" target="_blank"> 
 
      <div class="content-overlay"></div> 
 
      <img class="content-image" src="http://i.imgur.com/VcoiK3q.jpg"> 
 
      <div class="content-details fadeIn-bottom"> 
 
      <h3 class="content-title">Yotube Intro</h3> 
 
      <p class="content-text">Created using Adobe After Effects and Adobe Premiere Pro</p> 
 
      </div> 
 
     </a> 
 
     </div> 
 
    </div> 
 

 
    <div class="card-module"> 
 
     <div class="card-content"> 
 
     <a href="https://www.youtube.com/watch?v=UqDKgLVrO1c&feature=youtu.be" target="_blank"> 
 
      <div class="content-overlay"></div> 
 
      <img class="content-image" src="http://i.imgur.com/VcoiK3q.jpg"> 
 
      <div class="content-details fadeIn-bottom"> 
 
      <h3 class="content-title">News Intro</h3> 
 
      <p class="content-text">College project news intro</p> 
 
      </div> 
 
     </a> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</section>

Answer 1

包裹在DIV您.card-module然后添加CSS来包装text-align:center

.portfolio { 
 
color: #333333; 
 
background: #f7f7f7; 
 
} 
 

 
.portfolio h2 { 
 
padding-top: 50px; 
 
text-align: center; 
 
margin: 0 auto; 
 
} 
 

 
.portfolio p { 
 
text-align: center; 
 
margin-bottom: 0; 
 
line-height: 1.5em; 
 
padding-bottom: 30px; 
 
} 
 

 
hr { 
 
width: 10%; 
 
margin-bottom: 50px; 
 
} 
 

 
.card-module { 
 
display: inline-block; 
 
width: 33%; 
 
margin-bottom: 30px; 
 
} 
 

 
.card-content { 
 
position: relative; 
 
margin: 0 auto; 
 
max-width: 90%; 
 
} 
 

 
.card-content .content-overlay { 
 
background: rgba(0,0,0,0.7); 
 
position: absolute; 
 
height: 98%; 
 
left: 0; 
 
top: 0; 
 
bottom: 0; 
 
right: 0; 
 
opacity: 0; 
 
-webkit-transition: all 0.4s ease-in-out 0s; 
 
-moz-transition: all 0.4s ease-in-out 0s; 
 
transition: all 0.4s ease-in-out 0s; 
 
} 
 

 
.card-content:hover .content-overlay{ 
 
opacity: 1; 
 
} 
 

 
.card-content, .content-overlay, .content-image, .content-details { 
 
width: 100%; 
 
} 
 

 
.content-details { 
 
position: absolute; 
 
text-align: center; 
 
top: 50%; 
 
left: 50%; 
 
opacity: 0; 
 
-webkit-transform: translate(-50%, -50%); 
 
-moz-transform: translate(-50%, -50%); 
 
transform: translate(-50%, -50%); 
 
-webkit-transition: all 0.3s ease-in-out 0s; 
 
-moz-transition: all 0.3s ease-in-out 0s; 
 
transition: all 0.3s ease-in-out 0s; 
 
} 
 

 
.card-content:hover .content-details{ 
 
top: 57%; 
 
left: 50%; 
 
opacity: 1; 
 
} 
 

 
.content-details h3{ 
 
color: #fff; 
 
font-weight: 500; 
 
font-size: 1.52vw; 
 
letter-spacing: 0.15em; 
 
margin-bottom: 0.5em; 
 
text-transform: uppercase; 
 
} 
 

 
.content-details p{ 
 
color: #fff; 
 
font-size: 0.8em; 
 
font-size: 1.2vw; 
 
} 
 

 
.fadeIn-bottom{ 
 
top: 80%; 
 
} 
 
#card-wrap{text-align:center}

<section class="work" id="work"> 
 
    <div class="portfolio"> 
 
    <h2>Work</h2> 
 
    <p> 
 
     brief description <br> here 
 
    </p> 
 

 
    <hr> 
 
    <div id="card-wrap"> 
 
     <div class="card-module"> 
 
     <div class="card-content"> 
 
      <div class="content-overlay"></div> 
 
      <img class="content-image" src="http://i.imgur.com/VcoiK3q.jpg"> 
 
      <div class="content-details fadeIn-bottom"> 
 
      <h3 class="content-title">Arsenal Fanpage</h3> 
 
      <p class="content-text">As a highschool project, I made a soccer club fanpage website.</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
     <div class="card-module"> 
 
     <div class="card-content"> 
 
      <div class="content-overlay"></div> 
 
      <img class="content-image" src="http://i.imgur.com/VcoiK3q.jpg"> 
 
      <div class="content-details fadeIn-bottom"> 
 
      <h3 class="content-title">Coding Website Beta</h3> 
 
      <p class="content-text">This was a beta website created to display all my high school work.</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
     <div class="card-module"> 
 
     <div class="card-content"> 
 
      <div class="content-overlay"></div> 
 
      <img class="content-image" src="http://i.imgur.com/VcoiK3q.jpg"> 
 
      <div class="content-details fadeIn-bottom"> 
 
      <h3 class="content-title">Coding Website Launch</h3> 
 
      <p class="content-text">This was the official look of my portfolio website when released for all to see.</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
     <div class="card-module"> 
 
     <div class="card-content"> 
 
      <div class="content-overlay"></div> 
 
      <img class="content-image" src="http://i.imgur.com/VcoiK3q.jpg"> 
 
      <div class="content-details fadeIn-bottom"> 
 
      <h3 class="content-title">Website Resume</h3> 
 
      <p class="content-text">This is my website resume created from scratch.</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
     <div class="card-module"> 
 
     <div class="card-content"> 
 
      <a href="https://www.youtube.com/watch?v=i0eYyobCkGo" target="_blank"> 
 
      <div class="content-overlay"></div> 
 
      <img class="content-image" src="http://i.imgur.com/VcoiK3q.jpg"> 
 
      <div class="content-details fadeIn-bottom"> 
 
       <h3 class="content-title">Yotube Intro</h3> 
 
       <p class="content-text">Created using Adobe After Effects and Adobe Premiere Pro</p> 
 
      </div> 
 
      </a> 
 
     </div> 
 
     </div> 
 

 
     <div class="card-module"> 
 
     <div class="card-content"> 
 
      <a href="https://www.youtube.com/watch?v=UqDKgLVrO1c&feature=youtu.be" target="_blank"> 
 
      <div class="content-overlay"></div> 
 
      <img class="content-image" src="http://i.imgur.com/VcoiK3q.jpg"> 
 
      <div class="content-details fadeIn-bottom"> 
 
       <h3 class="content-title">News Intro</h3> 
 
       <p class="content-text">College project news intro</p> 
 
      </div> 
 
      </a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

Answer 2

既然你已经围绕你的文字，你可以居中的一切：

.portfolio { 
    text-align: center; 
} 

这应该做的伎俩。

或者你可以将所有卡模块包装到一个div中，并将相同的样式应用到该div。