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 test
this is a test
this is a test
</div>
<div>
this is another test for the second div
</div>
</div>

效果显示如下:

(by新手小白的记录)

div中的内容水平垂直居中的更多相关文章

  1. div中的“内容”水平垂直居中

    1. div高度自适应的情况 div在不设置高度的时候,会被里面的内容撑开,内容自动填充在div中,无论是一行内容还是多行内容,此时不需要设置垂直居中,内容自动在中间的, 想要看的更直观些,只需要加上 ...

  2. 让DIV中的内容水平和垂直居中

    让一个层水平垂直居中是一个非常常见的布局方式,但在html中水平居中使用margin:0px auto;可以实现,但垂直居中使用外边距是无法达到效果的.(页面设置height:100%;是无效的),这 ...

  3. [转]如何让div中的内容垂直居中

    转自:http://blog.163.com/yan_1990/blog/static/197805107201211311515454/ 虽然Div布局已经基本上取代了表格布局,但表格布局和Div布 ...

  4. 如何让div中的内容垂直居中

    虽然Div布局已经基本上取代了表格布局,但表格布局和Div布局仍然各有千秋,互有长处.比如表格布局中的垂直居中就是Div布局的一大弱项,不过好在千变万化的CSS可以灵活运用,可以制作出准垂直居中效果, ...

  5. div中的内容居中

    要使div中的内容居中显示,不仅div要设定“text-align:centr"  ,内置对象要添加margin:auto;属性才能使其在firefox等其他浏览器中也能居中.

  6. div中让内容能不换行就尽量不换行.【纯原】

    div中让内容能不换行就尽量不换行,部分左对齐,部分右对齐. <html> <head> <title>九歌·少司命</title> <style ...

  7. 怎样推断DIV中的内容为空

    怎样推断DIV中的内容为空 1.问题背景 推断div内部是否为空.假设为空,给出无数据提示:否则显示正常页面 2.设计源代码 <!DOCTYPE html PUBLIC "-//W3C ...

  8. div中的内容垂直居中的五种方法

    一.行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...

  9. html中div使用CSS实现水平/垂直居中的多种方式

    CSS中的居中,在工作中,会经常遇到.它可以分为水平居中和垂直居中,以下是几种实现居中的方式. git 查看源码 配合在线预览,效果更佳 以下例子中,涉及到的CSS属性值. .parent-frame ...

随机推荐

  1. Unity: Invalid serialized file version xxx Expected version: 5.3.4f1. Actual version: 5.3.5f1.

    Unity发布安卓项目,如果直接使用Unity打包APK一切Ok,导出Google项目 使用Idea打包 一进去直接Crash. 报错: 1978-2010/? E/Unity﹕ Invalid se ...

  2. 戴尔3542安装ubuntu时出现:failed to lead ldlinux.c32

    解决办法: 1. 开机未进入系统是连续敲击F2,进入BIOS2.在 BIOS 的Boot菜单下,将Secure Boot 改为 Disabled3. 将Boot List Option 改为 Lega ...

  3. Windows Phone 十六、HttpClient

    HttpClient 对象也可以实现网络请求 相对于 HttpWebRequest 对象来说,HttpClient 操作更简单,功能更强大 HttpClient 提供一系列比较简单的API来实现基本的 ...

  4. python中遍历文件的3个方法

    转自: http://www.jb51.net/article/54640.htm 用python进行文件遍历有多种方法,这里列举并说明一下. os.path.walk() 这是一个传统的用法. wa ...

  5. android手机和ios手机的分辨率

    Android手机目前常见的分辨率 1.1 手机常见分辨率: 4:3 VGA     640*480 (Video Graphics Array) QVGA  320*240 (Quarter VGA ...

  6. 【001:C# 中 get set 简写存在的陷阱】

    如下代码: public class Age { private int ageNum ; public int AgeNum { get{ return this.ageNum; } set{ th ...

  7. C语言三维数组分解

    很多人在学习C的时候,感觉三维数组很难想象,而且不理解深度是什么?做了一个图,帮大家分解一下                                                       ...

  8. sys,os,模块-正则表达式

    # *__conding:utf-8__* """"我是注释""" sys,os模块 import sysimport os pr ...

  9. 【转】解决Delphi WebBrowser 无法调用当前浏览器的版本

    procedure TregedtIE.FormCreate(Sender: TObject);   begin     WriteAppNameToReg;     WebBrowser1.Navi ...

  10. jQuery 操作 CSS

    jQuery 拥有若干进行 CSS 操作的方法.我们将学习下面这些: addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleCl ...