Div 的水平居中对齐（网格布局）

Question

我使用 div 设计了一个网格布局。正如您在下面看到的。但是我需要将它们水平居中放置在网络浏览器的中间。有人可以告诉我怎么做吗？我尝试过的一切似乎都将所有 div 居中对齐，就好像它们在彼此顶部的一列中一样。

提前致谢。

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>

然后，由于所有这些项目的宽度都是固定的，因此计算所有总宽度=800px 的宽度变得很容易。
将它应用到外部容器，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%); 
}

Div 的水平居中对齐（网格布局）

Horizontal Centre Alignment Of Divs (Grid Layout)

html

css

grid-layout

centering