方案一：所有内容垂直水平居中

　　兼容性：IE8+。

条件：内容宽度和高度可以未知，可以是多行文字、图片、div。

　　描述：使用table-cell + vertical-align ， html代码见文末。

        .centerDiv {width: 800px;height: 350px;background-color: #00b0f0;text-align: center;display: table-cell;vertical-align: middle;}

方案二：单行内容垂直水平居中

　　兼容性：IE7+

　　条件：文字内容必须为单行

描述： text-align: center水平居中， line-height 等于height 垂直居中

方案三：未知大小图片垂直水平居中

　　兼容性：IE8+

　　条件：内容为图片，文字不行。文字和图片组合时，图片能居中，文字不能。

　　描述：父节点相对定位，图片绝对定位

        .centerDiv {width: 800px;height: 350px;background-color: #00b0f0;position: relative;}.centerDiv img {position: absolute;left: 0;top:0;right: 0;bottom: 0;margin: auto;}

方案四：已知宽高度div垂直水平居中

　　兼容性：I5+

　　条件：内容div高度宽度已知

　　描述：定位 + 负margin

        .centerDiv {width: 800px;height: 350px;background-color: #00b0f0;position: relative;}.centerDiv div {width: 500px;height: 300px;background-color: #00ee00;position: absolute;left: 50%; top: 50%;margin-left: -250px;margin-top: -150px;}

附： html测试代码

     <div class="centerDiv"><p>hello， this a p tag.</p></div><br><div class="centerDiv"><img src="img/head.jpg"></div><br><div class="centerDiv"><div><p>qwe</p><p>qwe</p><p>qwe</p></div></div>

转载于:https://www.cnblogs.com/codelovers/p/4399664.html

【CSS基础】实现 div 里的内容垂直水平居中相关推荐

java使用itext填充pdf模板文字和图片，并使填充后的模板内容垂直水平居中
一.背景由于业务需求,我需要将程序的部分数据生成PDF报告以供下载浏览二.实现方式设计一个pdf模板,可以通过pdf编辑工具编辑模板.市面上支持编辑表单的pdf编辑都可以,如Adobe Acro ...
Css标题中图片居中,图片居中：任意图片在div里的上下垂直都居中！
任意一个图片,在div中都居中显示,这是比较常用的CSS,很多刚学习的新手却并不知道! div{ border:1px solid #ccc; height:500px; width:500px; l ...
前端div里的内容下沉_自学Web前端的五个不同阶段，从浅入深
1.学习HTML,这是最简单,最基本的是要掌握div,formtable.Ulli.P.跨度.字体这些标签,这些都是最常用的,尤其是DIV和表格,DIV,表也可以用于布局,但不灵活,和用于基本表处理数 ...
学习《HTML+CSS基础课程》里的权值
学习课程,里面讲到了标签的权值,我认为有必要记录一下,因为新学者容易弄混,现将原文摘抄如下,温故知新吧. 特殊性有的时候我们为同一个元素设置了不同的CSS样式代码,那么元素会启用哪一个CSS样式呢? ...
如何实现div中的文字垂直水平居中
文字居中文字水平垂直居中可以使用: //方法一//设置line-height的值和为div的height值,实现垂直居中,使用text-align实现水平居中 .a{ height: 50px;li ...
Bootstrap表格内容垂直水平居中
.table th, .table td { text-align: center; vertical-align: middle!important; } 转载于:https://www.cnblo ...
前端CSS基础之案例--图片
用<前端CSS基础>文章里的内容完成一个图片案例效果展示: 代码实现: <!DOCTYPE html> <html lang="en"> &l ...
垂直水平居中的三种实现方式
今天向一位朋友请教垂直水平居中问题,没想到朋友直接给出了三种实现方式,这里记录下来. 如图所示,登陆页中有一个登陆表单,我们需要将表单内容垂直水平居中. 这里,为了简单起见,以如下的html为例: & ...
前端知识 — HTML内容、CSS基础
前端 1.前端是做什么的 2.我们为什么要学前端? 3.前端都有哪些内容? 1.HTML 2.CSS 3.JavaScript 4.jQuery和Bootstrap Web开发本质: 1.浏览器输入网 ...

【CSS基础】实现 div 里的内容垂直水平居中

方案一：所有内容垂直水平居中

方案二：单行内容垂直水平居中

方案三：未知大小图片垂直水平居中

方案四：已知宽高度div垂直水平居中

【CSS基础】实现 div 里的内容垂直水平居中相关推荐

最新文章

热门文章

【CSS基础】实现 div 里的内容垂直水平居中

方案一： 所有内容垂直水平居中

方案二： 单行内容垂直水平居中

方案三： 未知大小图片垂直水平居中

方案四：已知宽高度div垂直水平居中

【CSS基础】实现 div 里的内容垂直水平居中相关推荐

最新文章

热门文章

方案一：所有内容垂直水平居中

方案二：单行内容垂直水平居中

方案三：未知大小图片垂直水平居中