1、设置子元素:

  1. {
  2. ...
  3. position :absolute;
  4. margin:auto;
  5. top:;
  6. right:;
  7. bottom:;
  8. left:;
  9. }

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

  1. {
  2. position: absolute;
  3. top:50%;
  4. margin-top: - (0.5height);
  5. }

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

  1. {
  2. height:n px;
  3. line-height: n px;
  4. }

4、box 布局

5、transform

  1. {
  2. position: absolute;
  3. top: 50%;
  4. transformtranslateY(-50%);
  5. }

  

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. Linq工具篇(1)——使用LinqPad

    学习Linq,有一个非常强大的工具,那就是LinqPad,具体功能有多强大就不说了,网上百度一下就可以知道,百闻不如一见,用用就知道,在网上下载一个绿色版的,无需安装,直接运行,界面如下: 具体功能, ...

  2. Scala学习笔记(一):环境搭建

    计算机领域的编程语言种类繁多,如C.C++.Java.C#等,我们知道的一般都是较为流行的编程语言,然有更多的是没听说过的,于是也就说不上关注或者使用了 一次在网上查资料时,无意间看到了“函数式编程” ...

  3. Python进程、线程、协程及IO多路复用

    详情戳击下方链接 Python之进程.线程.协程 python之IO多路复用

  4. Ubuntu 安装Google浏览器

    Ubuntu自带的浏览器是火狐浏览器,使用的时候多多少少有些不方便,这里安装Googel浏览器. 下载 可以到 Ubuntu chrome去下载安装包. 安装 首先到下载的根目录 cd ~/Downl ...

  5. java.sql.Date java.sql.Time java.sql.Timestamp 之比较

    java.sql.Date,java.sql.Time和java.sql.Timestamp 三个都是java.util.Date的子类(包装类). java.sql.Date是java.util.D ...

  6. web入门脑图

  7. you need to resolve your current index first 已解决

    从一个分支A切换到另一个分支B后,对切换后的B分支进行pull操作,因为pull操作实际上包含了fetch+merge操作,在执行 merge操作时,由于很长时间没有对B分支执行过pull/merge ...

  8. 【Linux运维】LNMP环境配置

    安装准备: Centos7.3 MYSQL5.6 PHP5.6 NGINX1.10.3 一.安装Mysql mysql:[root@host129 src]#cd /usr/local/src/ [r ...

  9. 使用CodeBlocks编译64位程序(用的编译器仅仅是windows sdk的)

    需求: -CodeBlocks使用nightly版本: -Windows SDK(我使用的是6.0A,即微软针对vista的,因为这个比较小,你也可以选择其他版本但是要有64位编译器.他也适用于xps ...

  10. 问题 D: 约数的个数

    问题 D: 约数的个数 时间限制: 1 Sec  内存限制: 32 MB提交: 272  解决: 90[提交][状态][讨论版][命题人:外部导入] 题目描述 输入n个整数,依次输出每个数的约数的个数 ...