水平居中直接加上

標(biāo)簽即可，或者設(shè)置margin:auto;當(dāng)然也可以用下面的方法

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

放上示范的html代碼：

MAIN

方法一：

div使用絕對布局，設(shè)置margin:auto;并設(shè)置top、left、right、bottom的值相等即可，不一定要都是0。

.main{

text-align: center; /*讓div內(nèi)部文字居中*/

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

}

方法三：

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

標(biāo)簽，不過已經(jīng)過時了，用法如下：123

這個

標(biāo)簽就是相對于

標(biāo)簽里的文字，可以使其居中。

由于center標(biāo)簽已經(jīng)過時了，所以正規(guī)一點的話還是不建議使用的，可以使用如下的方式代替：

123

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。