HTML5 設置層居中
在網頁設計中，層的居中是一個非常基礎的操作，但也是讓很多初學者頭疼的難題。下面我們通過 HTML5 實現一下如何設置層居中。
首先，在 HTML 文件中創建一個層。我們可以使用 div 標簽來創建一個層。代碼如下：
<div id="layer"> <p>我是一個層</p> </div>可以看到，我們在層中插入了一個 p 標簽，方便我們以后調用。 接下來，在 CSS 文件中設置層的樣式。要注意，在設置層居中前，還要設置層寬度。代碼如下：
#layer{
width: 500px;
height: 300px;
background: #ccc;
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -250px;
}可以看到，我們設置了層的寬度和高度，并給它設置了一個背景色。其中，position 屬性設置為 absolute，以便后面的定位。top 和 left 屬性分別設置為 50%，表示居中。而 margin-top 和 margin-left 屬性則用來微調層的位置，保證它在水平和垂直方向上居中。
最后，我們在 HTML 中引入 CSS 文件，就可以看到層在網頁中居中顯示，代碼如下：<head> <link rel="stylesheet" href="style.css"> </head>如果覺得以上設置有些繁瑣，我們還可以使用更簡單的方法。 HTML5 提供了一個 flexbox 屬性來實現層的居中。代碼如下：
<div id="layer" style="display:flex;justify-content:center;align-items:center;"> <p>我是一個層</p> </div>我們只需要在層的 style 屬性中添加 display: flex，以便使用 flexbox 屬性。接著，我們分別設置 justify-content 和 align-items 屬性為 center，就可以實現居中了。它比起我們上面講的方法更加簡單，但是兼容性問題需要注意。
上一篇html5設置導航欄樣式
下一篇html5設置字體黑體