如何使网格元素居中？

Question

我尝试使用 flex 来居中网格，但感觉不优雅且令人畏缩。同时

left:50%; transform: translateX(-50%);

可以工作，但会破坏网格。简单的边距适应性不够。有什么正确的方法吗？

justify-items:center;

--> 它仅在网格内部居中，而不是网格本身

.calendar__wrapper{
    font-size:20px;
    position:relative;
    display:flex; /* is this normal?*/
    justify-content: center;
}
.calendar__inner{ 
    display:grid;
    grid-template-columns:  repeat(7, 1fr);
    grid-template-rows:  repeat(7, 1fr);
    position:absolute;
    /* left:50%; shouldn't use idk why
    transform: translateX(-50%); */
    justify-items:center; 

Answer 1

使网格本身居中并不是问题..因为使用

flex

方法将其相对于容器居中是完全合法的。

但在这里我决定提交完整的答案只是为了简化您的方法：

• 删除

  grid-template-rows: repeat(7, 1fr);

  ，因为您不需要固定行；
• 使用

  grid-auto-rows: min-content;

  使网格高度适应其内容；
• 摆脱相对/绝对定位..所以父容器将 表现得像块级，不会扰乱一般流程；
• 对

  .calendar__inner

  内部项目（天）有一个 CSS 规则；
• 摆脱网格上的

  justify-items:center

.calendar__wrapper{  
  display: flex;
  justify-content: center;
  
  font-size:20px;        
}
.calendar__inner{   
  display: grid;
  grid-template-columns: repeat(7, 1fr);  
  gap: .25em;
  grid-auto-rows: min-content;
}

.calendar__inner *{
  border: solid 1px;
  text-align: center;
}

/*border related rules...*/

.border{
  border: solid 1px;
}

.red{
  border-color: red;
}

.green{
  border-color: green;
}

.purple{
  border-color: purple;
}

<div class="calendar__wrapper border red">
  <div class="calendar__inner border green">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
    
    <div>15</div>
    <div>16</div>
    <div>17</div>
    <div>18</div>
    <div>19</div>
    <div>20</div>
    <div>21</div>
    
    <div>22</div>
    <div>23</div>
    <div>24</div>
    <div>25</div>
    <div>26</div>
    <div>27</div>
    <div>28</div>
  </div>
</div>