水平居中直接加上

標簽即可，或者設置margin:auto;當然也可以用下面的方法

下面說兩種在屏幕正中(水平居中+垂直居中)的方法

放上示范的html代碼：

MAIN

方法一：

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%);

}

方法三：

對于水平居中，可以使用最簡單的

標簽，不過已經過時了，用法如下：123

這個

標簽就是相對于

標簽里的文字，可以使其居中。

由于center標簽已經過時了，所以正規一點的話還是不建議使用的，可以使用如下的方式代替：

123

總結

以上是生活随笔為你收集整理的html屏幕垂直居中显示,HTML+CSS，让div在屏幕中居中（水平居中+垂直居中）方法总结...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。