div網頁水平居中代碼

⑴ div css居中

網頁經常需要將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標簽，不過已經過時了，用法如下：pcenter123/center/p
這個center標簽就是相對於p標簽里的文字，可以使其居中。
由於center標簽已經過時了，所以正規一點的話還是不建議使用的，可以使用如下的方式代替：p 123/p

⑵ 如何使文字在div中水平和垂直居中的css代碼，<div>水平垂直居中</div>

使文字在div中水平和垂直居中的的css樣式為

text-align:center;/*水平居中*/
line-height:20px;/*行距設為與div高度內一致容*/

示例如下：

1. HTML元素

   <div>水平垂直居中</div>

2. css樣式

   div{
   	width:200px;height:200px;/*設置div的大小*/
   	border:1pxsolidgreen;/*邊框*/
   	text-align:center;/*文字水平居中對齊*/
   	line-height:200px;/*設置文字行距等於div的高度*/
   	overflow:hidden;
   }

3. 顯示效果