方法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. eWebEditor9.x整合教程-Xproer.WordPaster

    版权所有 2009-2017 荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webplug/wordpa ...

  2. 编写高质量代码改善C#程序的157个建议——建议20：使用泛型集合代替非泛型集合

    建议20:使用泛型集合代替非泛型集合 在建议1中我们知道,如果要让代码高效运行,应该尽量避免装箱和拆箱,以及尽量减少转型.很遗憾,在微软提供给我们的第一代集合类型中没有做到这一点,下面我们看Array ...

  3. 设计模式09： Decorator 装饰模式（结构型模式）

    Decorator 装饰模式(结构型模式) 子类复子类,子类何其多加入我们需要为游戏中开发一种坦克,除了不同型号的坦克外,我们还希望在不同场合中为其增加以下一种多种功能:比如红外线夜视功能,比如水路两 ...

  4. Spring：配置文件

    首先是bean.xml,配置所有的bean,一般也叫applicationContext.xml,应用程序上下文.示例: <?xml version="1.0" encodi ...

  5. U盘安装Ubuntu 12.04成功后系统无法启动的原因及解决办法

    想搭建一个Linux开发环境,选择了ubuntu12.04长期支持版,采用u盘安装(Universal-USB-Installer做的启动),发现安装完成之后,拔掉u盘无法启动,插上u盘之后,可以重启 ...

  6. angular 中间人模式

    import { Component, OnInit, EventEmitter, Output } from '@angular/core'; @Component({ selector: 'app ...

  7. 一文读懂spring boot 和微服务的关系

    欢迎访问网易云社区,了解更多网易技术产品运营经验. Spring Boot 和微服务没关系, Java 微服务治理框架普遍用的是 Spring Cloud. Spring Boot 产生的背景,是开发 ...

  8. 【03】循序渐进学 docker：基础命令

    写在前面的话 之前谈了啥是 docker 和怎么安装 docker,这里就谈谈 docker 命令的使用,当然,这里的使用可能只是局限于 docker 的增删查改. 另外需要注意的是,为了图片的美观, ...

  9. shell-脚本-作用是发现前10个最占用磁盘空间的文件

    #!/bin/bash## 这个脚本的作用是发现前10个最占用磁盘空间的文件################定义这个脚本的全区变量##################################C ...

  10. loj #6122. 「网络流 24 题」航空路线问题

    #6122. 「网络流 24 题」航空路线问题 题目描述 给定一张航空图,图中顶点代表城市,边代表两个城市间的直通航线.现要求找出一条满足下述限制条件的且途经城市最多的旅行路线. 从最西端城市出发,单 ...