網頁經常需要將div在螢幕中居中顯示，以下幾個常用的方法，都比較簡單。 水平居中直接加上<center>標籤即可，或者設定margin:auto;當然也可以用下面的方法

下面說兩種在螢幕正中（水平居中+垂直居中）的方法 ，放上示範的html程式碼：

方法一：

div使用絕對佈局，設定margin:auto;並設定top、left、right、bottom的值相等即可，不一定要都是0。

.main{

text-align: center; /*讓div內部文字居中*/

background-color: #fff;

border-radius: 20px;

width: 300px;

height: 350px;

margin: auto;

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

}

效果如圖：

方法二： 仍然是絕對佈局，讓left和top都是50%，這在水平方向上讓div的最左與螢幕的最左相50%，垂直方向上一樣，所以再用transform向左（上）平移它自己寬度（高度）的50%，也就達到居中效果了，效果圖和上方相同。

.main{

text-align: center;

background-color: #fff;

border-radius: 20px;

width: 300px;

height: 350px;

position: absolute;

left: 50%; top: 50%;

transform: translate(-50%,-50%);

}

方法三： 對於水平居中，可以使用最簡單的<center>標籤，不過已經過時了，用法如下：<p><center>123</center></p>

這個<center>標籤就是相對於<p>標籤裡的文字，可以使其居中。

由於center標籤已經過時了，所以正規一點的話還是不建議使用的，可以使用如下的方式代替：<p>123</p>