DIV实现垂直居中的几种方法
说道垂直居中,我们首先想到的是vertical-align属性,但是许多时候该属性并不起作用。例如,下面的样式并不能达到内容垂直居中显示
div {
width:200px;
height:300px;
border: 1px solid #000;
vertical-align: middle;
}
原来vertical-align属性仅能够作用于单元格或图像显示。因此要在上面样式内加入以下代码,才能够使文字或图像垂直居中:
display: table-cell;
但是IE浏览器并不能很好的支持display:table-cell,所以也就不能很好的支持vertical-align属性了。你可以使用以下方法巧妙地解决垂直居中:
div{
line-height: 300px;
width: 200px;
height: 300px;
border: 1px solid #000;
}
通过定义单行文本的高度与行高相同,就能间接地实现文本垂直居中的问题。但是对于多行文本来说,这种方法就失效了。
下面说一下如何实现DIV在父元素中垂直居中
1、利用CSS3的transform属性对盒子进行移动实现,该样式定义在子元素上。代码如下:
div{
border:1px solid #000;
width:300px;
height: 200px;
position: absolute;
top:50%;
left: 50%;
z-index:;
-webkit-transform:translate(-50%,-50%);
}
2、使用CSS3的flex布局实现,该样式定义在父元素上。代码如下:
.parent{
border:1px solid #000;
width: 800px;
height: 500px;
justify-content: center; /*子元素水平居中*/
align-items: center; /*子元素垂直居中*/
display: -webkit-flex;
}
<div class="parent">
<div style="width:100px;height: 100px;border:1px solid #ccc"></div>
</div>
DIV实现垂直居中的几种方法的更多相关文章
- 【笔记】让DIV水平垂直居中的两种方法
今天写的了百度前端学院春季班的任务:定位和居中问题 由于距离上次学习CSS有点久远了,加上以前木有记笔记的习惯,方法忘得只剩下一种,今天通过网上查阅资料总结了以下两种简单的方法让DIV水平垂直居中. ...
- Div水平垂直居中的三种方法
百度了很多种方法,很多是不起作用的.下面这些方法是我亲自试过的.希望对大家有帮助! 下面是一波代码水军. <!DOCTYPE html> <html lang="en&qu ...
- 让div水平垂直居中的几种方法
最近,公司招了一批新人,吃饭的时候恰好碰到一个新同事,就跟他聊了起来.听他说了主管面试的时候出的一些问题,其中一个问题我印象特别深刻,因为,我当年进来的时候,也被问到这个问题.虽然这个问题已经问烂了, ...
- 如何将一个div水平垂直居中?4种方法做推荐
方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 兼容性:,IE7及之前版本不支持 div{ width: 200px; height: 200px; backg ...
- 如何将一个div水平垂直居中?6种方法做推荐
方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 兼容性:,IE7及之前版本不支持 div{ width: 200px; height: 200px; backg ...
- 未知宽高div水平垂直居中的3种方法
方法一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- 让一个小div在另一个大div里面 垂直居中的四种方法
方法一 .parent { width:800px; height:500px; border:2px solid #000; position:relative; } .child { width: ...
- 关于div水平垂直居中的几种方法
Dom结构: <div class="box"> <div class="inner"> 123 </div> </d ...
- 让div盒子相对父盒子垂直居中的几种方法
div相对于父盒子垂直居中的几种方法,之前在网上看到很多种方法,确实说的很对,也很具体,但是我感觉对于初学者来说,一目了然是最重要的,所以,我把很高深的技巧,和很复杂的css样式都剔除掉,旨在让更多人 ...
随机推荐
- [Unity插件]Lua行为树(十三):装饰节点完善
之前介绍了组合节点中三大常用的节点:BTSequence.BTSelector和BTParallel,一般来说,这三种就够用了,可以满足很多的需求. 接下来可以完善一下装饰节点,增加几种新的节点. 1 ...
- [Unity插件]Lua行为树(七):行为树嵌套
在上一篇的基础上,可以测试下行为树的嵌套,所谓的行为树嵌套,就是在一棵行为树下的某一个分支,接入另一棵行为树. 以下面这棵行为树为例: TestBehaviorTree2.lua TestBehavi ...
- [Unity插件]AI行为树使用总结
参考链接: https://blog.csdn.net/linxinfa/article/details/72937709 https://blog.csdn.net/wanghaodiablo/ar ...
- activiti explorer5.22.0源代码解读
请求通过ExplorerApplicationServlet(AbstractApplicationServlet.service()方法)进入web系统中. Activiti Explorer的应用 ...
- 插件:★★★ !!!图片懒加载 lazyload.js 、 jquery.scrollLoading.js
插件:图片懒加载 jquery.lazyload.js 2016-3-31 插件说明:http://www.w3cways.com/1765.html (小插件,好用) 下载地址: https://r ...
- python中的open、close、read、write、len、exists
open()打开文件 close()关闭文件 read()读取文件内容 write()写入内容 len()检查文件内容长度 exists()检查文件是否存在 我们举一个例子,将上方的内容全部应用到实际 ...
- 再谈java clone 以及 浅/深拷贝
简单对象的拷贝,直接使用其clone方法 即可, 不会有什么问题: class Dog implements Cloneable public Dog clone() { int age; Strin ...
- Jmeter之Bean shell使用-常用内置变量
Bean Shell常用内置变量 JMeter在它的BeanShell中内置了变量,用户可以通过这些变量与JMeter进行交互,其中主要的变量及其使用方法如下: log:写入信息到jmeber.l ...
- linux poi生成excel demo调试附调用代码
1.下载poi-3.9-20121203.jar包 2.java code package com.userpackage; import java.io.FileOutputStream; impo ...
- [记录] Ubuntu 配置Apache虚拟站点
版本 Ubuntu 16.04 1 . 首先找到Apapche配置文件夹 /etc/apache2/ apache2.conf conf-enabled magic mods-enabled sit ...