方法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. 升级Ubuntu 12.04下的gcc到4.7

    我们知道C++11标准开始支持类内初始化(in-class initializer),Qt creator编译出现error,不支持这个特性,原因在于,Ubuntu12.04默认的是使用gcc4.6, ...

  2. cmake的一些词的解释

    cmake中一些预定义变量 PROJECT_SOURCE_DIR  工程的根目录 PROJECT_BINARY_DIR    运行cmake命令的目录,通常是${PROJECT_SOURCE_DIR} ...

  3. ORCHARD学习教程-安装

    安装说明:测试对象为正式版1.8 安装方法: 使用Microsoft Web Platform Installer 利用Microsoft WebMatrix 来安装 Working with Orc ...

  4. XE ListBox实现伸缩效果

    功能:实现年月日压缩,初始化时item是所有年,点击年展开月,点击月展开天,再点击则收缩. 思路:实际上一开始是将所有item显示,只是将月日的item.height赋值为0,    记录每一行的it ...

  5. 中国城市 json

    点击查看完整代码,再点击复制即可复制代码. 三级json,省市区: [{ "value": "110000", "text": " ...

  6. Linux 命令之chcon

    chcon命令:修改对象(文件)的安全上下文.比如:用户:角色:类型:安全级别.主要用在selinux中用来更改安全上下文.命令格式: Chcon [OPTIONS…] CONTEXT FILES…. ...

  7. 使用Linq读取资源文件

    ResXResourceReader resxr = new ResXResourceReader(txt_WebResourceOpenFile.Text); IEnumerable<Dict ...

  8. blog搬家须知

    我的博客即将入驻“云栖社区”,诚邀技术同仁一同入驻. 地址:这里. 不过这里也是会同步更新的

  9. SHELL编程之条件判断

    一.if 语句结构 (1)单分支语句结构 if  条件测试操作 then  命令序列 fi #!/bin/bash MOUNT_DIR="/media/cdrom/" #-d $M ...

  10. Python爬取招聘信息，并且存储到MySQL数据库中

    前面一篇文章主要讲述,如何通过Python爬取招聘信息,且爬取的日期为前一天的,同时将爬取的内容保存到数据库中:这篇文章主要讲述如何将python文件压缩成exe可执行文件,供后面的操作. 这系列文章 ...