1、设置子元素:

{
...
position :absolute;
margin:auto;
top:;
right:;
bottom:;
left:;
}

2、设置子元素:(height必须是固定值)

{
position: absolute;
top:50%;
margin-top: - (0.5height);
}

3、设置子元素:(只适用于情况比较简单的单行文本)

{
height:n px;
line-height: n px;
}

4、box 布局

5、transform

{
position: absolute;
top: 50%;
transform:translateY(-50%);
}

  

CSS垂直居中小结的更多相关文章

  1. CSS垂直居中指南

    大概整理下css中的垂直居中问题 主要分两大类 1 知道块元素尺寸,一般就是指知道元素高度. 方法一:最简单的,类比水平居中. 思路:子元素设置为absolute;  top bottom都设置为0 ...

  2. 最常用的css垂直居中方法

    css垂直居中一直以来都是一个被大家说烂了的话题,翻来覆去的炒.不过说实话,正是因为css没有提供标准的垂直居中方法(不过在css3中已经有了相关规范),所以大家才会对它进行专门的研究.这研究来研究去 ...

  3. css垂直居中方法

    CSS垂直居中的简便方法:{position:absolute;left:0;bottom:0;top:0;right:0;margin:auto;}.

  4. day--43 HTML标签和CSS基本小结

    HTML标签和CSS基本小结一:常用标签 01:块标签 p,h1--h6 ,hr ,div 02:内联标签 b,i,u,s 小提示:块标签可以嵌套内置元素或者某些块级元素,但内联元素不能包含块级元素 ...

  5. CSS垂直居中完美有用实例

    <!DOCTYPE HTML>           <html>            <head>             <meta meta chars ...

  6. Day14:CSS垂直居中

    verticle-align:middle vertical-align:middle实现css垂直居中是常用的方法,但是需要注意,vertical生效的前提是diaplay:inline-block ...

  7. CSS垂直居中的8种方法

    CSS垂直居中的8种方法 1.通过verticle-align:middle实现CSS垂直居中. 通过vertical-align:middle实现CSS垂直居中是最常使用的方法,但是有一点需要格外注 ...

  8. 完美实现CSS垂直居中的11种方法

    在做前端项目时CSS的水平居中我们经常使用,但有时还会用到CSS垂直居中,对于小白来说这个就有些难度了,下面看一下我是如何实现的 本人前端小白,正在做一个小程序开发的项目,css样式调整搞的头都大了. ...

  9. css 垂直居中技巧

    CSS垂直居中技巧,我只会23个,你会几个?自古以来(是有多?~),网页CSS的垂直居中需求始终没有停过,而其困难度也始终没有让人轻松过,经过了每位开发先烈的研究后,据说CSS的垂直居中技巧已达到近十 ...

随机推荐

  1. Python入门及容易!网摘分享给大家!

    Python:Python学习总结 背景 PHP的$和->让人输入的手疼(PHP确实非常简洁和强大,适合WEB编程),Ruby的#.@.@@也好不到哪里(OO人员最该学习的一门语言). Pyth ...

  2. 【WPF】创建基于模板的WPF控件(经典)

    原文:[WPF]创建基于模板的WPF控件(经典) WPF可以创建两种控件,它们的名字也很容易让人混淆:用户控件(User Control)和定制控件(Customer Control),之所以如此命名 ...

  3. 完整的vue+vuex+api-router+database请求流程

  4. jmeter动态获取jsessionid

    思想是在一个线程组内添加一个cookie管理器,登录之后,用正则提取到sessionid,该线程组下的操作便可以共享这个session了. 1. 依次新建线程组.cookie管理器.http请求-登录 ...

  5. 我所认识的XPath

    实例demo 测试demo所需要xml测试数据 <?xml version="1.0" encoding="iso-8859-1"?> <bo ...

  6. Python|花了一天,为大家整理的一套来自外国大佬的密码速查表

    简单的HTTPS服务器 检查证书信息 输出 生成自签名证书 输出 准备一个签名注册请求 输出 生成无密码的RSA秘钥文件 用一个私钥给文件签名 输出 从签名验证一个文件 输出 通过pem文件做RSA加 ...

  7. Python全栈 正则表达式(概念、、语法、元字符、re模块)

    前言:        普通人有三件东西看不懂:医生的处方,道士的鬼符,程序员得正则表达式       什么是正则表达式? 正则表达式,又称规则表达式,英文名为Regular Expression,在代 ...

  8. NLP系列-中文分词(基于统计)

    上文已经介绍了基于词典的中文分词,现在让我们来看一下基于统计的中文分词. 统计分词: 统计分词的主要思想是把每个词看做是由字组成的,如果相连的字在不同文本中出现的次数越多,就证明这段相连的字很有可能就 ...

  9. mysql数据库,编码错误解决

    在写代码的过程中,经常会遇见,将中文字符输入到mysql数据库中,但是查看的时候,却发现,中文显示为乱码的情况,让人相当的头疼,今天正好解决了一个这样遇到的问题,所以简单总结一下: 1.首先查看数据库 ...

  10. lintcode-93-平衡二叉树

    93-平衡二叉树 给定一个二叉树,确定它是高度平衡的.对于这个问题,一棵高度平衡的二叉树的定义是:一棵二叉树中每个节点的两个子树的深度相差不会超过1. 您在真实的面试中是否遇到过这个题? Yes 样例 ...