幾種居中CSSdiv的方法

CSS實(shí)現(xiàn)div垂直居中的方法有很多。下面這些使div居中的方法在編寫網(wǎng)頁時(shí)經(jīng)常用到，最常見的例子就是登錄注冊(cè)彈出框。

方法一:使用絕對(duì)布局位置:absolutefordiv并設(shè)置top、left、right、bottom的值相等，但不一定都等于0；并設(shè)置邊距:自動(dòng)。

方法二:這個(gè)方法需要知道div的寬度和高度。使用絕對(duì)布局位置:絕對(duì)用于div并將top和left的值設(shè)置為50%；50%是指頁面窗口寬度和高度的50%；最后，將div向左上方移動(dòng)div寬度和高度的一半。

其中左邊距:-100px和上邊距:-100px可以寫成margin:-100px0px；子元素設(shè)置position:absolute，并將頂部、左側(cè)、右側(cè)和底部的值設(shè)置為相等。

方法二:利用位置。父設(shè)置位置:相對(duì)；；子設(shè)置位置:絕對(duì)。并將top和left設(shè)置為50%，將leftshift和upshift設(shè)置為子元素大小的一半。

方法三:使用顯示器:flex。此方法需要設(shè)置瀏覽器兼容性。

方法4:使用transform:translate()。父設(shè)置位置:相對(duì)；；子設(shè)置位置:絕對(duì)。并將頂部和左側(cè)設(shè)置為50%。最后，設(shè)置transform:translate(-50%，-50%)。

以上四種方法的效果圖如下所示。

今天我就分享到這里~如果你有更好的方法，請(qǐng)?jiān)谙旅媪粞栽u(píng)論。

html中如何設(shè)置中間p？

p居中可以用外邊距margin屬性來實(shí)現(xiàn)。1、新建html文檔，在body標(biāo)簽中添加p標(biāo)簽，標(biāo)簽的id為“header”，這時(shí)因?yàn)閜標(biāo)簽中沒有內(nèi)容且沒有設(shè)置樣式，所以網(wǎng)頁中顯示空白：2、這時(shí)為p標(biāo)簽設(shè)置原題中的css樣式，此時(shí)雖然p盒子顯示了，但是沒有居中：3、此時(shí)為p添加一個(gè)“margin:0auto”屬性就會(huì)居中顯示，“margin”指的是p標(biāo)簽的外邊距，“0”指的是p標(biāo)簽上下的外邊距，“auto”指的是p標(biāo)簽左右的外邊距，并且會(huì)根據(jù)瀏覽器窗口大小自動(dòng)居中，這時(shí)就是完整的html和css代碼。

html怎么讓p里的文本居中？

1、首先打開SublimeText軟件，新建一個(gè)HTML頁面，

2、然后我們?cè)趆tml頁面中加入p標(biāo)簽，并且在p標(biāo)簽中加入一些文字，

3、接下來我們給p標(biāo)簽編寫CSS樣式，這里主要是text-align和line-height兩個(gè)屬性，

4、最后我們運(yùn)行頁面程序，你就會(huì)在頁面中看到p中的文字水平垂直都居中了。

htmlcss里面，一個(gè)p里的ul怎么讓他居中對(duì)齊？

p里的ul下面的li居中對(duì)齊，關(guān)鍵點(diǎn)如下：1、CSS設(shè)置好Li的寬度2、Li的css加上居中代碼text-align:center。例子如下：

居中文字1

居中文字2

居中文字3

居中文字4

居中文字5

居中文字6

p+css頁面居中代碼？

網(wǎng)頁經(jīng)常需要將p在屏幕中居中顯示，以下幾個(gè)常用的方法，都比較簡單。水平居中直接加上center>標(biāo)簽即可，或者設(shè)置margin:auto;當(dāng)然也可以用下面的方法

下面說兩種在屏幕正中（水平居中+垂直居中）的方法，放上示范的html代碼：

方法一：

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

.main{

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

background-color:#fff;

border-radius:20px;

width:300px;

height:350px;

margin:auto;

position:absolute;

top:0;

left:0;

right:0;

bottom:0;

}

效果如圖：

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

.main{

text-align:center;

background-color:#fff;

border-radius:20px;

width:300px;

height:350px;

position:absolute;

left:50%;top:50%;

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

}

方法三：對(duì)于水平居中，可以使用最簡單的center>標(biāo)簽，不過已經(jīng)過時(shí)了，用法如下：p>center>123/center>/p>

這個(gè)center>標(biāo)簽就是相對(duì)于p>標(biāo)簽里的文字，可以使其居中。

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

在HTML中怎么讓p里的東西上下居中？

一個(gè)是橫豎居中，一個(gè)是橫著居中，一個(gè)是豎著居中。

這個(gè)表示這個(gè)元素上方的空隙占視窗高度的50%，左方的空隙占視窗寬度的50%這個(gè)就表示元素在X軸移動(dòng)元素一半寬度的距離，并在Y軸移動(dòng)元素一半高度的距離所以這樣就可以做到讓元素橫豎都居中了。所以如果你想讓一大塊東西在瀏覽器內(nèi)橫豎都居中，就直接外面套個(gè)p給個(gè)center的class就行：

這只是一種方法。

有很多對(duì)于垂直居中研究很深的文章，題主可以去找找。