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