有四種方法可將 html 框架居中:margin: 0 auto;:使框架水平居中。text-align: center;:使框架內容水平居中。display: flex; align-items: center;:使框架垂直居中。position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);:使用 css 轉換在固定尺寸框架的容器中心放置框架。
如何將 HTML 框架居中
在 HTML 中,有多種方法可以將框架居中。最簡單的方法是使用margin: 0 auto;
樣式。
<code class="html"><div style="margin: 0 auto; width: 500px;"> 內容 </div></code>
登錄后復制
這將使框架在水平方向上居中,無論其容器的寬度如何。
另一種方法是使用text-align: center;
樣式。這將使框架中的內容居中,而不是整個框架。
<code class="html"><div style="text-align: center; width: 500px;"> <p>內容</p> </div></code>
登錄后復制
對于垂直居中,可以使用display: flex;
和align-items: center;
樣式。這將使框架在垂直方向上居中。
<code class="html"><div style="display: flex; align-items: center;"> <div style="width: 500px;"> 內容 </div> </div></code>
登錄后復制
如果框架具有固定高度和寬度,還可以使用position: absolute;
和top: 50%; left: 50%; transform: translate(-50%, -50%);
樣式。這將使用 CSS 轉換將其放置在容器的中心。
<code class="html"><div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 500px; height: 500px;"> 內容 </div></code>
登錄后復制