div中内容居中的方法有哪些？

大家在使用div进行内容布局的时候，往往会用到对齐和居中样式，那么如何在div中调整内容居中呢？

一、行高（line-height）法

如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如：

p { height:30px; line-height:30px; width:100px; overflow:hidden; }

这段代码可以达到让文字在段落中垂直居中的效果。

二、内边距（padding）法

另一种方法和行高法很相似，它同样适合一行或几行文字垂直居中，原理就是利用padding将内容垂直居中，比如：

p { padding:20px 0; }

这段代码的效果和line-height法差不多。

三、CSS 3 的transform来实现

css代码如下：

.center-vertical{

top:50%;

transform:translateY(-50%);

}.center-horizontal{

position: relative;

left:50%;

transform:translateX(-50%); 

}

以上就是三种实现div内容居中的方法，大家可以参考选用。

共有：0条评论网友评论：

验证码 换一张