分享程序员开发的那些事...
更新时间：2022-10-19 13:12:27
您可以使用竖直和水平中心内容只与 CSS 。我将解释如何一步一步的过程，但首先在这里是你可以实现的两个演示：
现在让我们来看看如何制作这些花哨的响应广场！
保持元素正方形（或其他长度比率）的技巧是使用百分比 padding-bottom 。
旁注：您可以使用顶部填充或顶部/底部边距，但元素的背景将不会显示。
由于顶部填充是根据父元素（参见MDN参考），元素的高度将根据其宽度而改变。您现在可以根据其宽度保持其宽高比。
此时，您可以编写代码：
HTML ：
： < div>< / div>
CSS
div {
width：30％;
padding-bottom：30％; / * =正方形宽高比的宽度* /
}
>使用上述代码的简单布局示例 3 * 3方格网格。
使用此技术，您可以制作任何其他长宽比，这里是一个表格，根据宽高比和30％宽度给出底部填充值。
宽高比| padding-bottom |宽度为30％
------------------------------------------ ------
1：1 | = width | 30％
1：2 |宽度x 2 | 60％
2：1 |宽度x 0.5 | 15％
4：3 |宽度x 0.75 | 22.5％
16：9 |宽x 0.5625 | 16.875％
由于您无法在正方形内直接添加内容（它会扩展其高度，方块不再是正方形），您需要创建子元素（对于这个例子，我是usind divs）里面与 position：abolute; 并把内容放在里面。这将使内容超出流程并保持正方形的大小。
不要忘记在父div中添加 position：relative;
允许在我们的3x3网格中添加一些内容：
HTML ：
< div class =square
< div class =content>
.. CONTENT HERE ..
< / div>
< / div>
...等等9次为9个方块...
CSS ：
.square {
float：left;
position：relative;
width：30％;
padding-bottom：30％; / * = 1：1宽高比的宽度* /
margin：1.66％;
overflow：hidden;
}
.content {
position：absolute;
height：80％; / * = 100％-2 * 10％padding * /
width：90％; / * = 100％ - 2 * 5％padding * /
padding：10％5％;
}
RESULT < - 有一些格式化，使它漂亮！
水平：
很容易，您只需要将 text-align：center 添加到 .content 。
RESULT
垂直对齐
这变得很严重！诀窍是使用
display：table;
/ *和* /
display：table-cell;
vertical-align：middle;
但，我们不能使用表; 在 .square 或 .content divs，因为它与 position：absolute; 所以我们需要在 .content divs中创建两个孩子。我们的代码将更新如下：
HTML ：
< div class =square>
< div class =content>
< div class =table>
< div class =table-cell>
... CONTENT HERE ...
< / div>
< / div>
< / div>
< / div>
...等等9次为9个方块...
CSS： / p>
.square {
float：left;
position：relative;
width：30％;
padding-bottom：30％; / * = 1：1宽高比的宽度* /
margin：1.66％;
overflow：hidden;
}
.content {
position：absolute;
height：80％; / * = 100％-2 * 10％padding * /
width：90％; / * = 100％ - 2 * 5％padding * /
padding：10％5％;
}
.table {
display：table;
height：100％;
width：100％;
}
.table-cell {
display：table-cell;
vertical-align：middle;
height：100％;
width：100％;
}
我们现已完成，我们可以在这里查看结果：
I'm wondering how I would go about creating a layout with responsive squares. Each square would have verticaly and horizontaly aligned content. The specific example is displayed below...
You can make responsive grid of squares with verticaly and horizontaly centered content only with CSS. I will explain how in a step by step process but first here are 2 demos of what you can achieve :
Now let's see how to make these fancy responsive squares!
The trick for keeping elements square (or whaterver other acpect ratio) is to use percent padding-bottom.
Side note: you can use top padding too or top/bottom margin but the background of the element won't display.
As top padding is calculated acccording to the width of the parent element (See MDN for reference), the height of the element will change according to its width. You can now Keep its aspect ratio according to its width.
At this point you can code :
HTML :
<div></div>
CSS
div {
width: 30%;
padding-bottom: 30%; /* = width for a square aspect ratio */
}
Here is a simple layout example of 3*3 squares grid using the code above.
With this technique, you can make any other aspect ratio, here is a table giving the values of bottom padding according to the aspect ratio and a 30% width.
Aspect ratio | padding-bottom | for 30% width
------------------------------------------------
1:1 | = width | 30%
1:2 | width x 2 | 60%
2:1 | width x 0.5 | 15%
4:3 | width x 0.75 | 22.5%
16:9 | width x 0.5625 | 16.875%
As you can't add content directly inside the squares (it would expand their height and squares wouldn't be squares anymore) you need to create child elements (for this example I am usind divs) inside them with position:abolute; and put the content inside them. This will take the content out of the flow and keep the size of the square.
Don't forget to add position:relative; on the parent divs so the absolute children are positioned/sized relatively to their parent.
Lets' add some content to our 3x3 grid of squares :
HTML :
<div class="square">
<div class="content">
.. CONTENT HERE ..
</div>
</div>
... and so on 9 times for 9 squares ...
CSS :
.square {
float:left;
position: relative;
width: 30%;
padding-bottom: 30%; /* = width for a 1:1 aspect ratio */
margin:1.66%;
overflow:hidden;
}
.content {
position:absolute;
height:80%; /* = 100% - 2*10% padding */
width:90%; /* = 100% - 2*5% padding */
padding: 10% 5%;
}
RESULT <-- with some formatting to make it pretty!
Horizontaly :
This is pretty easy, you just need to add text-align:center to .content.
RESULT
Vertical alignment
This becomes serious! The trick is to use
display:table;
/* and */
display:table-cell;
vertical-align:middle;
but we can't use display:table; on .square or .content divs because it conflicts with position:absolute; so we need to create two children inside .content divs. Our code will be updated as follow :
HTML :
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell">
... CONTENT HERE ...
</div>
</div>
</div>
</div>
... and so on 9 times for 9 squares ...
CSS :
.square {
float:left;
position: relative;
width: 30%;
padding-bottom : 30%; /* = width for a 1:1 aspect ratio */
margin:1.66%;
overflow:hidden;
}
.content {
position:absolute;
height:80%; /* = 100% - 2*10% padding */
width:90%; /* = 100% - 2*5% padding */
padding: 10% 5%;
}
.table{
display:table;
height:100%;
width:100%;
}
.table-cell{
display:table-cell;
vertical-align:middle;
height:100%;
width:100%;
}
We have now finished and we can take a look at the result here :