方法1：table-cell

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

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

　　

　　

方法2：display:flex

.box2{

    display: flex;
    justify-content:center; //横
    align-items:Center;  //竖
}

css垂直居中几种方法（二）的更多相关文章

  1. CSS 垂直居中5种方法

    利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些方法在一些浏览器 ...

  2. css垂直居中 两种方法

    在前端面试的时候我们经常会被问道怎样使一个元素在页面垂直居中呢,这也是一个老生常谈的问题了. 解决的方法基本都是使用定位来实现 div{display: fixed;left: 50%;top: 50 ...

  3. HTML5结合CSS的三种方法+结合JS的三种方法

    HTML5+CSS: HTML中应用CSS的三种方法 一.内联 内联样式通过style属性直接套进HTML中去. 示例代码 <pstylepstyle="color:red" ...

  4. css实现垂直居中6种方法

    在一次次笔试,一次次的面试中,问到垂直居中的问题太多太多,但是我每一次回答,都好像都不能让面试官太满意,今天特意花点时间,整理一下css垂直居中问题. 1.如果是单行文本.看代码: <!DOCT ...

  5. WordPress引入css/js两种方法

    WordPress引入css/js 是我们制作主题时首先面对的一个难点,任何一款主题都要加载自己的css,js,甚至很有可能还需要加载Jquery文件,网上方法特多,说法不一,我们今天借鉴wordpr ...

  6. 为IE单独写CSS的三种方法

    本文由 Kayo Lee 发表,本文链接:http://kayosite.com/the-methods-make-css-only-for-ie.html 因为万恶的 IE 存在各种的不标准,因此, ...

  7. 纯CSS实现多行文字垂直居中几种方法解析

    场景:父元素 高度固定,如何使其中的文字垂直居中? 1.table布局: 利用display:table+display:table-cell的方法 <!DOCTYPE html> < ...

  8. css中元素水平垂直居中4种方法介绍

    table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...

  9. 未知宽高div水平垂直居中3种方法

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head&g ...

随机推荐

  1. 编写高质量代码改善C#程序的157个建议——建议32：总是优先考虑泛型

    建议32:总是优先考虑泛型 泛型的优点是多方面的,无论泛型类还是泛型方法都同时具备可重用性.类型安全性和高效率等特性,这是非泛型和非泛型方法无法具备的. 以可重用性为例: class MyList { ...

  2. MongoDB整理笔记の增加节点

    MongoDB Replica Sets 不仅提供高可用性的解决方案,它也同时提供负载均衡的解决方案,增减Replica Sets 节点在实际应用中非常普遍,例如当应用的读压力暴增时,3 台节点的环境 ...

  3. Jquery delegate的理解

    $(".step4TagList .albumShow", "#divStep4").delegate(" .abmFct .icoRt", ...

  4. 2张图简单分析count(0)与count(*)

    以前一直以为count(0)查询效率比count(*)比较高,原因大概是这么认为count(0)只是第一列进行统计,而count(*)所有列放在一起统计(亲,不要误会,这里不是所有列累加哦) 结果真的 ...

  5. 平台播放声音（ext.js）

    首先把需要的两个js文件放在public/core路径下 (文件已经上传到博客了) 音频文件放在文件一级目录 代码:JxCustom.loadAudio("wav/NG.wav") ...

  6. 【大数据之数据仓库】GreenPlum PK DeepGreen（TPCH）

    1.背景 一张UML类图可以简单的说明GreenPlum和DeepGreen之间的关系: GreenPlum: 主页:http://greenplum.org/ 源码:开源,https://githu ...

  7. java并发编程（更新）

    概念理解:①串行程序②并发程序: 线程安全问题: 同一进程中的所有线程共享进程中的内存地址空间.如果没有明确的同步机制来管理共享数据,那么当一个线程正在使用某个变量时,另一个线程可能同时访问这个变量, ...

  8. Educational Codeforces Round 61 (Rated for Div. 2) G(线段树，单调栈)

    #include<bits/stdc++.h>using namespace std;int st[1000007];int top;int s[1000007],t[1000007];i ...

  9. 1. C/C++笔试面试经典题目一

    1. 不用循环和递归,实现打印数字0到999. #include <iostream> #include<stdio.h> using namespace std; #defi ...

  10. 数组常用的API——splice（）截取

    他的几个作用:截取  删除  增加  替换. 当传递一个参数的时候 : 截取开始的位置,参数代表下标,默人会截取到结束的位置. 当传递两个参数的时候: 第一个参数是删除的下标: 第二个参数代表删除几个 ...