这里是jsfiddle
我想在类main-testimonial-block中将div内的内容居中
我可以使用position: absolute;
left: 50%;
transform: translate(-50%);
但是当我使用此技巧时，其中的两个框会换行。我只想在屏幕上没有足够的空间（即：在手机上）时才换行
.main-testimonial-block {}
.snip1359 {
font-family: 'Roboto', Arial, sans-serif;
position: relative;
float: left;
overflow: hidden;
margin: 10px 1%;
min-width: 200px;
max-width: 405px;
width: 100%;
color: #ffffff;
text-align: left;
line-height: 1.4em;
background-color: #1e1e1e;
padding-top: 120px;
}
.snip1359 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.snip1359 img {
max-width: 100%;
vertical-align: top;
opacity: 0.85;
}
.snip1359 figcaption {
width: 100%;
background-color: #141414;
padding: 25px;
position: relative;
}
.snip1359 figcaption:before {
position: absolute;
content: '';
bottom: 100%;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 55px 0 0 400px;
border-color: transparent transparent transparent #141414;
}
.snip1359 .profile {
border-radius: 50%;
position: absolute;
bottom: 100%;
left: 25px;
z-index: 1;
max-width: 90px;
opacity: 1;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}
.snip1359 h3 {
font-size: 1.3em;
margin: 25px;
font-weight: 300;
position: absolute;
top: 0;
right: 0;
text-align: right;
}
.snip1359 h3 span {
display: block;
font-size: 0.65em;
color: #2980b9;
}
.snip1359 blockquote {
margin: 0 0 10px;
padding: 0 0 30px;
letter-spacing: 1px;
opacity: 0.8;
font-style: italic;
font-weight: 300;
}
.snip1359 blockquote:after {
font-family: 'FontAwesome';
content: "\201C";
position: absolute;
font-size: 180px;
line-height: 1em;
color: #212121;
font-style: normal;
content: "\201D";
right: 20px;
bottom: -105px;
}<div class="main-testimonial-block">
<figure class="snip1359">
<figcaption>
<blockquote>Test message, works!</blockquote>
</figcaption>
<h3>Kamal Chhirang<span>BCA III</span></h3>
</figure>
</style>
<figure class="snip1359">
<figcaption>
<blockquote>asfsfs</blockquote>
</figcaption>
<h3>test test<span>testtttt</span></h3>
</figure>
</div>
答案 0 :(得分：0)
您只需要将margin: 0 auto;和宽度添加到容器中。
.main-testimonial-block {
margin: 0 auto;
min-width: 200px;
max-width: 405px;
width: 100%;
}
此外，您的html中有一个随机的</style>需要删除。
答案 1 :(得分：0)
您可以使用CSS3 Display Flexbox轻松完成此操作。 为了使图形在垂直和水平方向上居中对齐。 这是一个很好的Guide for CSS3 Flexbox
您需要做的就是修改main-testimonial-block以充当display: flex并处理其子元素。您可以为图形设置最大高度或高度，以使它们不会因黑色背景而过度增长，例如110px
我将首先为您提供问题的答案：
.main-testimonial-block {
display: flex;
align-items: center; /* centers vertically */
justify-content: center; /* centers horizontally */
/* if you want your Figures to be centered all over the screen
vertically set a height for this class,
your figures can be centered in it.
e.g. height: 100vh for Fullscreen. */
height: 100vh;
}
有关工作副本和其他居中方法的摘要，请参见下文。
.main-testimonial-block {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.snip1359 {
font-family: 'Roboto', Arial, sans-serif;
position: relative;
float: left;
overflow: hidden;
margin: 10px 1%;
min-width: 200px;
max-width: 405px;
width: 100%;
color: #ffffff;
text-align: left;
line-height: 1.4em;
background-color: #1e1e1e;
padding-top: 120px;
}
.snip1359 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.snip1359 img {
max-width: 100%;
vertical-align: top;
opacity: 0.85;
}
.snip1359 figcaption {
width: 100%;
background-color: #141414;
padding: 25px;
position: relative;
}
.snip1359 figcaption:before {
position: absolute;
content: '';
bottom: 100%;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 55px 0 0 400px;
border-color: transparent transparent transparent #141414;
}
.snip1359 .profile {
border-radius: 50%;
position: absolute;
bottom: 100%;
left: 25px;
z-index: 1;
max-width: 90px;
opacity: 1;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}
.snip1359 h3 {
font-size: 1.3em;
margin: 25px;
font-weight: 300;
position: absolute;
top: 0;
right: 0;
text-align: right;
}
.snip1359 h3 span {
display: block;
font-size: 0.65em;
color: #2980b9;
}
.snip1359 blockquote {
margin: 0 0 10px;
padding: 0 0 30px;
letter-spacing: 1px;
opacity: 0.8;
font-style: italic;
font-weight: 300;
}
.snip1359 blockquote:after {
font-family: 'FontAwesome';
content: "\201C";
position: absolute;
font-size: 180px;
line-height: 1em;
color: #212121;
font-style: normal;
content: "\201D";
right: 20px;
bottom: -105px;
}<div class="main-testimonial-block">
<figure class="snip1359">
<figcaption>
<blockquote>Test message, works!</blockquote>
</figcaption>
<h3>Kamal Chhirang<span>BCA III</span></h3>
</figure>
</style>
<figure class="snip1359">
<figcaption>
<blockquote>asfsfs</blockquote>
</figcaption>
<h3>test test<span>testtttt</span></h3>
</figure>
</div>
首先，将text-align: center设置为.main-testimonial-block，以使内容居中。然后，使用类.snip1359重设图形上的浮点数并将它们设置为display: inline-block。这使它们的行为类似于块元素，但仅根据需要采用宽度。
该方法的缺点是，您只能水平居中。您可以相应地在子元素上设置文本对齐方式。这是此方法的CSS。
.main-testimonial-block {
display: block;
text-align: center;
}
.snip1359 {
float: none;
display: inline-block;
}
.snip1359处于浮动状态，但从未清除。您应该清除浮动元素以预测布局问题。