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. mono webreques https exception

    前几天在做一个使用URL通过WebRequest请求HTML页面的功能的时候遇到了点坑,程序在开发环境没有任何的问题,部署到linux mono上之后就跪了.代码如下: public static s ...

  2. LINUX网络相关命令(转)

    网络连通性 Ping:发送一个 ICMP 回声请求消息给主机,一直持续到到你按下 Ctrl+C .Ping 表示一个包通过 ICMP 从你的机器发送出去,然后在IP层得到回应.Ping 可以检测你与另 ...

  3. 27、理解js的继承机制(转载自阮一峰)

    Javascript继承机制的设计思想   作者: 阮一峰 日期: 2011年6月 5日 我一直很难理解Javascript语言的继承机制. 它没有"子类"和"父类&qu ...

  4. 「个人训练」Copying Books(UVa714)

    好久不更新主要是怠惰了....还要加强训练. 题意分析与思路 注意到这样一句话: our goal is to minimize the maximum number of pages assigne ...

  5. 讨伐Cucumber行为驱动

    Cucumber行为驱动,简称BDD,其核心思想是把自然语言转换成代码:但在敏捷开发的过程中,这种东西极大的束缚了测试人员的手脚,感觉它像封建时代的八股文,要遵守严格的韵律,反正我个人十分反感:就像在 ...

  6. Leetcode代码补全——二叉树

    在刷leetcode的过程中发现,在原网页输入答案是不需要自己构筑树和链表的,虽然便于直接思考算法,但是久而久之类似过于依赖编辑器,反而不知道如何创建树和链表,因此总结了该网页省略的部分,以其中题为例 ...

  7. linux学习总结-----web前端①

    <html> <head> <title></title> <meta charset='utf-8'/> ... </head> ...

  8. tensorflow nmt基本配置(tf-1.4)

    随着tensorflow的不断更新,直接按照nmt的教程搭建nmt环境会报错的...因此,需要一些不太好的办法来避免更多的问题出现.tensorflow看来在ubuntu和debian中运行是没有问题 ...

  9. MySQL训练营01

    一.数据库基础知识: 1. 数据库(database):保存有组织的数据的容器(通常是一个或者一组文件) 2. 数据库管理系统(DBMS):数据库软件,外界通过DBMS来创建和操纵数据库,具体是什么, ...

  10. Python 3 学习笔记之——面向对象

    1. 类的介绍 类(Class) 用来描述具有相同的属性和方法的对象的集合.它定义了该集合中每个对象所共有的属性和方法.对象是类的实例,类是对象的抽象. 方法:类中定义的函数. 类变量:类变量在整个实 ...