vertical-align:middle  是依赖div内子元素最高的行高来实现对某元素居中的

-------不存在浮动时可以直接生效垂直居中

HTML

.box1{
display: table-cell;
vertical-align: middle;
text-align: center;
}

CSS

<div class="box box1">
<span>垂直居中</span>
</div>

-----如果存在浮动不生效情况 需要通过元素占位的方法居中可以通过:after 或者直接新建元素 (可能是定位影响子元素默认最高的行高)

.box1{
float:left;
}

  

.box1:after{
content:'';
width:0;
height:100%;
display:inline-block;
vertical-align:middle;
}

  

其他垂直居中方式  浏览器兼容性不能兼容较低版本 很多是HTML5样式

       display:flex

.box1{
display: flex;
justify-content:center;
align-items:Center;
}

   绝对定位和负边距

.box1{position:relative;}
.box1 span{
position: absolute;
width:100px;
height: 50px;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-25px;
text-align: center;
}

  绝对定位和0

.box1 span{
width: 50%;
height: 50%;
background: #000;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}

  translate

.box1 span{
position: absolute;
top:50%;
left:50%;
width:100%;
transform:translate(-50%,-50%);
text-align: center;
}

  display:flex和margin:auto

.box1{
display: flex;
text-align: center;
}
.box1 span{margin: auto;}

 display:-webkit-box

.box1{
display: -webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
-webkit-box-orient: vertical;
text-align: center
}

 display:-webkit-box

<div class="floater"></div>
<div class="content"> Content here </div>

  

.floater {
float:left;
height:50%;
margin-bottom:-120px;
}
.content {
clear:both;
height:240px;
position:relative;
}

  

原文出处:http://www.cnblogs.com/hutuzhu/p/4450850.html

CSS样式 vertical-align:middle 垂直居中生效情况的更多相关文章

  1. 前端知识点回顾之重点篇——CSS中vertical align属性

    来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念 红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度, ...

  2. Chrome开发工具Elements面板(编辑DOM和CSS样式)详解

    Element 译为“元素”,Element 面板可以让我们动态查看和编辑DOM节点和CSS样式表,并且立即生效,避免了频繁切换浏览器和编辑器的麻烦. 我们可以使用Element面板来查看源代码,它不 ...

  3. css样式让input垂直居中

    css样式让input垂直居中 css代码: .div1{ border: 1px solid #CCC; width:1120px; height:40px; margin:auto; displa ...

  4. css样式之垂直居中

    1.div的水平居中 margin:0 auto 2.table-cell实现垂直居中 样式:.box{ width: 200px; height: 200px; background: red; } ...

  5. css样式之vertical-align垂直居中的应用

    css样式之vertical-align垂直居中的应用:将图片垂直左右居中 元素垂直居中 1:必须给容器父元素加上text-align:center 2:必须给当前元素转换成行内块元素,display ...

  6. 文字在div中水平和垂直居中的的css样式

    文字在div中水平和垂直居中的的css样式 text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ 示例如下: HTML元素 & ...

  7. 使文字在div中水平和垂直居中的的css样式为,四个边分别设置阴影样式

    text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ HTML元素 <div>水平垂直居中</div> ...

  8. css样式,媒体查询,垂直居中,js对象

    下面是一些截图,有关查询效率,css样式,媒体查询,垂直居中,js基本类型.  

  9. css样式和定义的class都没问题,但样式却没生效

    今天开发遇到过这样的问题,主要原因是 css 文件格式有问题导致的.有问题的 css 样式的那一行下面的 css 样式不能生效

随机推荐

  1. Dealing with a Stream-based Transport 处理一个基于流的传输 粘包 即使关闭nagle算法,也不能解决粘包问题

    即使关闭nagle算法,也不能解决粘包问题 https://waylau.com/netty-4-user-guide/Getting%20Started/Dealing%20with%20a%20S ...

  2. 用于金融分析的Python包

    1. NumPy:实现各种数组对象函数和傅立叶变换等等科学计算模块.2. SciPy:提供更多科学计算功能,包括矩阵,求解线性方程组,积分运算,优化等.3. matplotlib:一个跨平台的数值绘图 ...

  3. Yii框架2.0的 验证码

    最近看了一个Yii的教程视频,是按1.1的版本讲的,我想用Yii2.0的框架也参考他的学习开发下,结果发现好多不一样的,现在就说说验证码的事 首先加入一个actions 做验证码图片的显示,实际事调用 ...

  4. mysql 约束条件 auto_increment 自动增长 修改自增字段起始值

    创建一张表 t20 mysql) ); Query OK, rows affected (0.01 sec) mysql> desc t20; +-------+----------+----- ...

  5. JavaWeb—Tomcat

    简介 Tomcat 是由 Apache 开发的一个 Servlet 容器,实现了对 Servlet 和 JSP 的支持,并提供了作为Web服务器的一些特有功能,如Tomcat管理和控制平台.安全域管理 ...

  6. Jmeter添加变量的四种方法

    一.在样本中添加同请求一起发送的参数.根据服务器设置的数据类型,来添加不同类型的参数 二.用户定义的变量 1.创建:添加->配置元件->用户定义的变量 2.作用:当前的线程组内所有Samp ...

  7. webuploader 多图片上传

    WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件. 具体接口参考 webuploader接口文档地址 一.图片上传功能 ...

  8. KDDCUP CTR预测比赛总结

    赛题与数据介绍 给定查询和用户信息后预测广告点击率 搜索广告是近年来互联网的主流营收来源之一.在搜索广告背后,一个关键技术就是点击率预测-----pCTR(predict the click-thro ...

  9. matplotlib 的 subplot, axes and axis

    fig = plt.figure('多图', (10, 10), dpi=80) #第一个指定窗口名称,第二个指定图片大小,创建一个figure对象 plt.subplot(222) #2*2的第二个 ...

  10. win8.1 设置默认输入法为英文

    win8.1中文版 输入法默认为微软拼音且为中文,此事在使用类似cmd就很不方便了,这里我们只需要将输入法设置为 “允许我为每个应用窗口设置不同的输入法”即可,操作如下: