div中的内容水平垂直居中

1. div高度自适应的情况

div在不设置高度的时候，会被里面的内容撑开，内容自动填充在div中，无论是一行内容还是多行内容，此时不需要设置垂直居中，内容自动在中间的，

想要看的更直观些，只需要加上padding元素，内容四周便会留下空白，实现水平垂直居中的效果

css代码如下：

.demo{width: 200px;border: 1px solid red;padding: 20px;}

HTML代码如下：

<div class="demo">this is a test of margin this is a test of margin this is a test of margin this is a test of margin this is a test of margin         </div>

效果如下所示：

2.div设置具体高度

（1）内容只有一行

设置div的line-height和div的高度一样即可，这个大家都知道哒

（2）内容不确定有几行

这时候需要在div中再加一层结构，用p标签或者div都可以

方法一：

css代码如下：

.demo{position: absolute;width: 200px;           height: 200px; border: 1px solid red;
}p{ position: absolute;width: 150px;top: 50%;left:50%;transform: translate(-50%,-50%);border: 1px solid black;}

HTML代码如下：

<div class="demo"><p>this is a test of margin this is a test of margin this is a test of margin this is a test of margin  </p>
</div>

效果如下：

方法二：若是不想用position：absolute这样的脱离文档流的样式，那就可以尝试模拟表格的方法

设置父元素display：table，设置子元素display：table-cell，并设置vertical-align：middle即可

css代码如下：

.demo{width: 200px;           height: 200px; display: table;border: 1px solid red;
}p{ display: table-cell;vertical-align: middle;text-align: center;border: 1px solid black;}

HTML代码如下：

<div class="demo"><p>this is a test of margin this is a test of margin this is a test of margin this is a test of margin  </p>           </div>

效果如下所示：

此时子元素设置宽度是没用的，宽度始终和父元素一致；

但是如果子元素设置高度的话，若是高度小于父元素则无效果，若是高度大于父元素则父元素的高度也相应增加到和子元素一样的高度

方法三：

使用css3新增的flex布局完成。

设置父元素display:box; box-pack:center; box-orient:vertical;即可，记得要在前面加上浏览器前缀哦

css代码如下：

.box{width: 200px;height: 200px;border: 1px solid red;display: box;box-pack:center;box-orient:vertical;display: -webkit-box;-webkit-box-pack:center;-webkit-box-orient:vertical;
}

HTML代码如下：

<div class="box"><div>this is a testthis is a testthis is a test</div><div>this is another test for the second div    </div>
</div>

效果显示如下：

（by新手小白的记录）

转载于:https://www.cnblogs.com/lynnmn/p/6141123.html

div中的内容水平垂直居中相关推荐

设置DIV中的select水平垂直居中
设置select在div中水平居中 <div style="position: relative"><select class="select" ...
vue之div让文字内容水平垂直居中
思想 ①让文字先垂直居中,再水平居中: ②若遇到文字和div一起水平垂直居中,则外面再套一个div,先让它俩都垂直居中,再内部处理文字水平居中. 代码 line-height: 100px; // 控 ...
h5中设置div中的内容水平并垂直居中
1.水平居中 text-align: center 2.垂直居中,设置line-height等于div的高度例: <div style="height: 100px; backgro ...
让div中的文字水平垂直居中
总所周知水平居中为:text-align:center 垂直居中为:line-height:100px (此处100px为外边div的宽度)
5种div 内容水平垂直居中方法
以下是五种让 div 中的内容水平垂直居中的方法: 使用 Flex 布局使用 Flex 布局是让 div 中的内容水平垂直居中的最常见方法,可以使用以下样式实现: .container {displ ...
学习使用CSS实现div中的内容垂直居中的方法
学习使用CSS实现div中的内容垂直居中的方法一.行高(line-height)法二.内边距(padding)法三.模拟表格法四.CSS3的transform来实现五:css3的box方法实 ...
html flex上下居中,css3 flex实现div内容水平垂直居中的几种方法
一.flex-direction: (元素排列方向) ※ flex-direction:row (横向从左到右排列==左对齐) ※ flex-direction:row-reverse (与row 相 ...
如何将div中的内容垂直居中
如何将div中的内容垂直居中第一种方法: 在div里面添加:text-align:center; line-height: 60px; 这里的line-height是行高,这个根据你的div的高度要 ...
div中的内容水平居中显示
今天总结下几种div中的内容水平居中的几种方法,至于好坏我还不是很清楚,就不阐述,希望有大佬能指示下,小弟不胜感激 1.首先是常规的 margin属性,上下固定,左右自适应 <style> ...

div中的内容水平垂直居中

div中的内容水平垂直居中相关推荐

最新文章

热门文章