Горизонтальное центральное выравнивание разделов (сетка)

Question

Я разработал сетку с использованием div. Как вы можете видеть ниже. Однако мне нужно сосредоточить их горизонтально в середине веб-браузера. Может кто-нибудь, пожалуйста, покажи мне, как? Все, что я пробовал, похоже, выравнивает все divs централизованно, как если бы они находились в одном столбце друг над другом.

Заранее спасибо.

HTML

<div class="row"> 
    <div class="col"> 
     <div class="trigger vertical img1"> 
      <div tabindex="0" class="maincontent static"><div class="slider"> 
<img src="slide1.png" width="200" /> 
<img src="slide2.png" width="200" /> 
<img src="slide3.png" width="200" /> 
<img src="slide4.png" height="200"/> 
</div></div> 
     </div> 
    </div> 
    <div class="col"> 
     <div class="trigger img1"> 
      <div tabindex="0" class="maincontent static"><div class="slider2"> 
<img src="slide1.png" height="200" width="200" /> 
<img src="slide2.png" height="200" width="200" /> 
<img src="slide3.png" height="200" width="200" /> 
<img src="slide4.png" height="200" width="200" /> 
</div></div></div> 
     <div class="trigger"> 
      <div tabindex="0" class="maincontent static"><div class="slider2"> 
<img src="slide1.png" height="200" width="200" /> 
<img src="slide2.png" height="200" width="200" /> 
<img src="slide3.png" height="200" width="200" /> 
<img src="slide4.png" height="200" width="200" /> 
</div></div> 
     </div> 
    </div> 
    <!-- </div> 
<div class="row">--> 
    <div class="col"> 
     <div class="trigger"> 
      <div tabindex="0" class="maincontent hover-img img4"><img src="STEP1.jpg" width="200"/><p>Text Here 4<p></div> 
     </div> 
     <div class="trigger"> 
      <div tabindex="0" class="maincontent hover-img img5"><img src="STEP3.jpg" width="200"/><p>Text Here 5<p></div> 
     </div> 
    </div> 
    <div class="col"> 
     <div class="trigger"> 
      <div tabindex="0" class="maincontent hover-img img6"><img src="STEP2.jpg" width="200"/><p>Text Here 6<p></div> 
     </div> 
     <div class="trigger"> 
      <div tabindex="0" class="maincontent hover-img img7"><img src="STEP4.jpg" width="200"/><p>Text Here 7<p></div> 
     </div> 
    </div> 
</div> 
<div class="row"> 
    <div class="trigger"> 
     <div tabindex="0" class="maincontent static"><div class="slider2"> 
<img src="slide1.png" height="200" width="200" /> 
<img src="slide2.png" height="200" width="200" /> 
<img src="slide3.png" height="200" width="200" /> 
<img src="slide4.png" height="200" width="200" /> 
</div></div> 
    </div> 
    <div class="trigger"> 
     <div tabindex="0" class="maincontent static"><div class="slider2"> 
<img src="slide1.png" height="200" width="200" /> 
<img src="slide2.png" height="200" width="200" /> 
<img src="slide3.png" height="200" width="200" /> 
<img src="slide4.png" height="200" width="200" /> 
</div></div> 
    </div> 
    <div class="trigger large"> 
     <div tabindex="0" class="maincontent staticlarge"><div class="slider"> 
<img src="slide1.png" height="200" width="400" /> 
<img src="slide2.png" height="200" width="400" /> 
<img src="slide3.png" height="200" width="400" /> 
<img src="slide4.png" height="200" width="400" /> 
</div></div> 
    </div> 
</div> 
<div class="row"> 
<div class="trigger"> 
<div tabindex="0" class="maincontent static"><div class="slider2"> 
<img src="slide1.png" height="200" width="200" /> 
<img src="slide2.png" height="200" width="200" /> 
<img src="slide3.png" height="200" width="200" /> 
<img src="slide4.png" height="200" width="200" /> 
</div></div> 
</div> 
<div class="trigger"> 
<div tabindex="0" class="maincontent static"><div class="slider2"> 
<img src="slide1.png" height="200" width="200" /> 
<img src="slide2.png" height="200" width="200" /> 
<img src="slide3.png" height="200" width="200" /> 
<img src="slide4.png" height="200" width="200" /> 
</div></div> 
</div> 
<div class="trigger"> 
<div tabindex="0" class="maincontent staticlarge"> 
<iframe align="center" src="clock2.php" width="300px" height="200px" scrolling="no" frameBorder="0" style="margin-left:5px;"></iframe></div></div> 

CSS

<style type="text/css"> 
.trigger { 
width:200px; 
height:200px; 
} 
.trigger.large { 
width: 400px; 
} 
.trigger.vertical { 
height: 400px; 
} 
.trigger.vertical * { 
height: 400px; 
} 
.hover-img, .hover-img.hover_effect { 
position: relative; 
width: 200px; 
height: 200px; 
-webkit-transition: all 1s ease-in-out; 
-moz-transition: all 1s ease-in-out; 
-ms-transition: all 1s ease-in-out; 
-o-transition: all 1s ease-in-out; 
transition: all 1s ease-in-out; 
-webkit-transform-style: preserve-3d; 
text-align: center; 
font-size: 0; 
-webkit-user-select: none; 
-webkit-touch-callout: none; 
border-style: solid; 
border-width: 1px; 
border-color: #CCCCB2; 
border-radius: 5px; 
} 
.static { 
position: relative; 
width: 200px; 
height: 200px; 
text-align: center; 
font-size: 0; 
border-style: solid; 
border-width: 1px; 
border-color: #CCCCB2; 
border-radius: 5px; 
} 
.staticlarge { 
position: relative; 
width: 400px; 
height: 200px; 
text-align: center; 
font-size: 0; 
border-style: solid; 
border-width: 1px; 
border-color: #CCCCB2; 
border-radius: 5px; 
} 
.trigger.large .hover-img, .trigger.large .hover-img.hover_effect { 
width: 400px; 
} 
.trigger:hover > .hover-img { 
-webkit-transform: rotateY(180deg); 
-moz-transform: rotateY(180deg); 
-ms-transform: rotateY(180deg); 
-o-transform: rotateY(180deg); 
transform: rotateY(180deg); 
font-size: 14px; 
color: #FFF; 
} 
.trigger:hover > .hover-img.img4 { 
background-color: #f47878; 
} 
.trigger:hover > .hover-img.img5 { 
background-color: #f6c447; 
} 
.trigger:hover > .hover-img.img6 { 
background-color: #92cf96; 
} 
.trigger:hover > .hover-img.img7 { 
background-color: #f47878; 
} 
.trigger:hover > .hover-img.img12 { 
background-color: #92cf96; 
} 
.trigger:hover .hover-img img { 
display: none; 
} 
#container { 
width:960px; 
margin: 0 auto; 
} 
.row { 
display: flex; 
} 
.col { 
display:inline-block; 
} 
.trigger.large .hover-img, .trigger.large .hover-img.hover_effect { 
width: 400px; 
} 
#apDiv1 { 
position: absolute; 
width: 100px; 
height: 200px; 
z-index: 1; 
background-color: #999999; 
} 
.trigger:hover p { 
display:block; 
transform:scaleX(-1) 
} 

Answer 1

Используйте div, чтобы обернуть HTML, как показано ниже <div class="bodyCont">

<div class="bodyCont"> 
<div class="row"> 
    <div class="col"> 
     <div class="trigger vertical img1"> 
      <div tabindex="0" class="maincontent static"><div class="slider"> 
<img src="slide1.png" width="200" /> 
<img src="slide2.png" width="200" /> 
<img src="slide3.png" width="200" /> 
<img src="slide4.png" height="200"/> 
</div></div> 
     </div> 
    </div> 
    <div class="col"> 
     <div class="trigger img1"> 
      <div tabindex="0" class="maincontent static"><div class="slider2"> 
<img src="slide1.png" height="200" width="200" /> 
<img src="slide2.png" height="200" width="200" /> 
<img src="slide3.png" height="200" width="200" /> 
<img src="slide4.png" height="200" width="200" /> 
</div></div></div> 
     <div class="trigger"> 
      <div tabindex="0" class="maincontent static"><div class="slider2"> 
<img src="slide1.png" height="200" width="200" /> 
<img src="slide2.png" height="200" width="200" /> 
<img src="slide3.png" height="200" width="200" /> 
<img src="slide4.png" height="200" width="200" /> 
</div></div> 
     </div> 
    </div> 
    <!-- </div> 
<div class="row">--> 
    <div class="col"> 
     <div class="trigger"> 
      <div tabindex="0" class="maincontent hover-img img4"><img src="STEP1.jpg" width="200"/><p>Text Here 4<p></div> 
     </div> 
     <div class="trigger"> 
      <div tabindex="0" class="maincontent hover-img img5"><img src="STEP3.jpg" width="200"/><p>Text Here 5<p></div> 
     </div> 
    </div> 
    <div class="col"> 
     <div class="trigger"> 
      <div tabindex="0" class="maincontent hover-img img6"><img src="STEP2.jpg" width="200"/><p>Text Here 6<p></div> 
     </div> 
     <div class="trigger"> 
      <div tabindex="0" class="maincontent hover-img img7"><img src="STEP4.jpg" width="200"/><p>Text Here 7<p></div> 
     </div> 
    </div> 
</div> 
<div class="row"> 
    <div class="trigger"> 
     <div tabindex="0" class="maincontent static"><div class="slider2"> 
<img src="slide1.png" height="200" width="200" /> 
<img src="slide2.png" height="200" width="200" /> 
<img src="slide3.png" height="200" width="200" /> 
<img src="slide4.png" height="200" width="200" /> 
</div></div> 
    </div> 
    <div class="trigger"> 
     <div tabindex="0" class="maincontent static"><div class="slider2"> 
<img src="slide1.png" height="200" width="200" /> 
<img src="slide2.png" height="200" width="200" /> 
<img src="slide3.png" height="200" width="200" /> 
<img src="slide4.png" height="200" width="200" /> 
</div></div> 
    </div> 
    <div class="trigger large"> 
     <div tabindex="0" class="maincontent staticlarge"><div class="slider"> 
<img src="slide1.png" height="200" width="400" /> 
<img src="slide2.png" height="200" width="400" /> 
<img src="slide3.png" height="200" width="400" /> 
<img src="slide4.png" height="200" width="400" /> 
</div></div> 
    </div> 
</div> 
<div class="row"> 
<div class="trigger"> 
<div tabindex="0" class="maincontent static"><div class="slider2"> 
<img src="slide1.png" height="200" width="200" /> 
<img src="slide2.png" height="200" width="200" /> 
<img src="slide3.png" height="200" width="200" /> 
<img src="slide4.png" height="200" width="200" /> 
</div></div> 
</div> 
<div class="trigger"> 
<div tabindex="0" class="maincontent static"><div class="slider2"> 
<img src="slide1.png" height="200" width="200" /> 
<img src="slide2.png" height="200" width="200" /> 
<img src="slide3.png" height="200" width="200" /> 
<img src="slide4.png" height="200" width="200" /> 
</div></div> 
</div> 
<div class="trigger"> 
<div tabindex="0" class="maincontent staticlarge"> 
<iframe align="center" src="clock2.php" width="300px" height="200px" scrolling="no" frameBorder="0" style="margin-left:5px;"></iframe></div></div> 

       </div> 

1. Тогда, так как вы зафиксировав ширину для всех этих элементов становится легко вычислить ширину для всех общая ширина = 800px.

2. Применить его к outercontainer и margin:0 auto; будет делать трюк

CSS

.bodyCont{ 
    width :800px; 
    margin:0px auto; 
} 

DEMO

Answer 2

просто сделать первый DIV (один перед class="row") а class (т.е. wrapper) и вставьте следующий css центрировать полное содержание обертку в середине экрана:

.wrapper { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    -webkit-transform: translate(-50%,-50%); 
    -ms-transform: translate(-50%,-50%); 
    transform: translate(-50%,-50%); 
}