文字在div中水平垂直居中,字体在div中垂直居中
如何使文字在div中水平和垂直居中的css代码，水平垂直居中
使文字在div中水平和垂直居中的的css样式为
text-align:center;?/*水平居中*/
line-height:?20px;?/*行距设为与div高度一致*/
示例如下：
HTML元素
div水平垂直居中/div
css样式
div{
width:200px;height:200px;??/*设置div的大小*/
border:1px?solid?green;????/*边框*/
text-align:?center;????????/*文字水平居中对齐*/
line-height:?200px;????????/*设置文字行距等于div的高度*/
overflow:hidden;
}
显示效果
如何设置一个div中的文字水平垂直居中
由于div 是块级元素，在css中并没有可以使块级元素内的元素垂直居中的属性。所以只能使用其他的方法。 设置文字的padding，使其达到居中的效果。、 在文字外层，div内包裹一个标签，只是一段文字并将p标签的大小设置的与div标签同样大校再对p标
div中如何设置文字居中
1、可以用text-align属性设置。首先打开hbuilder编辑器，新建一个html文件，先切换到边改边看模式：
2、写一个div出来，同时在内部加上一些文字，使用css增加属性，使得div的区域看得清楚：
3、接下来就使用text-align的center属性将文字横向居中，同时设置行高，使这行文字实际占用的高度和div高度相同，就产生了居中效果：
4、如果是多行文字，需要配合行内标签p和它的padding属性来完成居中，以上就是css设置div文字居中的演示：
如何使文字在div中水平和垂直居中的css代码
可以用“text-align”属性和“line-height”属性。
1、新建html文件，在body标签中添加div标签，在div标签输入文字，这里以“演示文本”为例，给div标签设置宽度、高度和背景色属性，属性值分别为200、100和灰色，这时“演示文本”默认位置为div盒子的左上方：
2、这时给div标签添加上“text-align”属性，属性值为“center”，这时文字将会在div容器中水平居中：
3、这时给div标签添加行高“ling-height”属性，属性值为高度的值“100px”，再添加“vertical-align”属性，属性值为“middle”，这时文字将会水平垂直都居中：
怎么把div的内容设置为水平垂直居中
div中的内容垂直居中的五种方法
一、行高（line-height）法
如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如：
p { height:30px; line-height:30px; width:100px; overflow:hidden; }
这段代码可以达到让文字在段落中垂直居中的效果。
二、内边距（padding）法
另一种方法和行高法很相似，它同样适合一行或几行文字垂直居中，原理就是利用padding将内容垂直居中，比如：
p { padding:20px 0; }
这段代码的效果和line-height法差不多。
三、模拟表格法
将容器设置为display:table，然后将子元素也就是要垂直居中显示的元素设置为display:table-cell，然后加上vertical-align:middle来实现。
html结构如下：
div id="wrapper"
div id="cell"
p测试垂直居中效果测试垂直居中效果/p
p测试垂直居中效果测试垂直居中效果/p
/div
/div
css代码：
#wrapper {display:table;width:300px;height:300px;background:#000;margin:0 auto;color:red;}
#cell{display:table-cell; vertical-align:middle;}
遗憾的是IE7及以下不支持。
四、CSS3的transform来实现
css代码如下：
.center-vertical{
position: relative;
top:50%;
transform:translateY(-50%);
}.center-horizontal{
position: relative;
left:50%;
transform:translateX(-50%);
}
五：css3的box方法实现水平垂直居中
html代码：
div class="center"
div class="text"
p我是多行文字/p
p我是多行文字/p
p我是多行文字/p
/div
/div
css代码：
.center {
width: 300px;
height: 200px;
padding: 10px;
border: 1px solid #ccc;
background:#000;
color:#fff;
margin: 20px auto;
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
display: -o-box;
-o-box-orient: horizontal;
-o-box-pack: center;