方法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. （回溯法）ip地址的合理性

    题目: 给定一个只包含数字的字符串,通过返回所有可能有效的IP地址组合来恢复它. 例如: 给定“”, return [“255.255.11.135”,“255.255.111.35”]. (顺序无所 ...

  2. 编写高质量代码改善C#程序的157个建议——建议11： 区别对待==和Equals

    建议11: 区别对待==和Equals 在开始本建议之前,首先要明确概念“相等性”.CLR中将“相等性”分为两类:“值相等性”和“引用相等性”.如果用来比较的两个变量所包含的数值相等,那么将其定义为“ ...

  3. DPF.Android.Native.Components.v2.8.1 for delphi xe6 使用DPFJAlertDialog遇到的问题

    使用DPFJAlertDialog控件时发现DPFJAlertDialog1Click不能捕获到对话框到底按了那个按键,上网搜索后找到了解决方法: 打开DPF.Android.JAlertDialog ...

  4. C#中如何向数组中动态添加元素

    转自:https://blog.csdn.net/qq_35938548/article/details/78325558 背景:现需要向数组中循环插入字符串,但C#中的数组是不支持动态添加元素的,只 ...

  5. C#中return的两个作用

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...

  6. 十三、Node.js-fs模块（上）

    Node.js内置的fs模块就是文件系统模块,负责读写文件以及对文件进行相关操作. 下面直接可参考下面的代码进行fs模块里面基本方法的学习: /** * Created by Administrato ...

  7. C# 小球100米自由落下

    //一球从N 米高自由落下,每次落地后反跳回原高度的一般:再录下,求它在第十次落地时,共经过多少米?第10次反弹多高 static string ballDsitance(float height1, ...

  8. php代码审计1（php.ini配置）

    1.php.ini基本配置-语法 大小写敏感directive = value(指令=值)foo=bar 不等于 FOO=bar 运算符| & - ! 空值的表达方法foo =     ;fo ...

  9. 单元测试unittest

    unittest.TestSuite():用例集合 uinttest.defaultTestLoader.discover():寻找测试用例,去哪个目录下寻找测试用例,加载测试用例

  10. Maven配置与安装

    最近重装了一下系统,便重新安装与配置了maven,记录这个过程并分享出来. 注意:maven安装需要Java依赖,我这里使用的是jdk1.8. 1.安装并配置环境变量 首先在 maven 官网下载 m ...