方法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. (转)mongodb学习（翻译1）

    原文地址:http://www.cnblogs.com/Johnzhang/archive/2013/09/10/3313582.html 学习mongodb,试着翻译写,英语能力有限,希望大家指正, ...

  2. 煤球数目——第七届蓝桥杯C语言B组（省赛）第一题

    原创 煤球数目 有一堆煤球,堆成三角棱锥形.具体:第一层放1个,第二层3个(排列成三角形),第三层6个(排列成三角形),第四层10个(排列成三角形),....如果一共有100层,共有多少个煤球? 请填 ...

  3. WndProc

    主要用在拦截并处理系统消息和自定义消息. form窗体的一个重载方法. protected override void WndProc(ref Message m) { //拦截窗体最小化按钮消息 i ...

  4. 使用CodeMaid自动程序排版[转]

    前言 「使用StyleCop验证命名规则」这篇文章,指引开发人员透过StyleCop这个工具,来自动检验项目中产出的程序代码是否合乎命名规则. [Tool] 使用StyleCop验证命名规则 但是在项 ...

  5. Winform中的DatagridView显示行号

    1.设置 RowPostPaint 为true 2.启用RowPostPaint事件 /// <summary> /// DataGridView显示行号 /// </summary ...

  6. CPU 和 GPU 的区别

    作者:知乎用户链接:https://www.zhihu.com/question/19903344/answer/96081382来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注 ...

  7. RESTful API概念解析

    什么是restful? REST与技术无关,代表的是一种软件架构风格,REST是Representational State Transfer的简称,中文翻译为“表征状态转移”或“表现层状态转化”. ...

  8. 基于SSH协议clone GitHub远端仓库到本地-git

    经常逛 GitHub 的可能都知道,在 clone 远端仓库的时候,会有两个选项,如下图: 首先我们来说明一下两种方式的区别. 使用 HTTPS url 克隆对初学者来说会比较方便,复制HTTPS u ...

  9. 如何理解java采用Unicode编码

    http://blog.csdn.net/gjb724332682/article/details/43229563 Java中字符仅以一种形式存在,那就是Unicode.由于java采用unicod ...

  10. 利用百度翻译API批量翻译文本

    有时间再做总结! # coding=utf-8 #authority:bing #2017-7-18 import httplib import md5 import urllib import ur ...