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. 显示效果