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. x86的控制寄存器CR0,CR1,CR2,CR3

    状态和控制寄存器组除了EFLAGS.EIP ,还有四个32位的控制寄存器,它们是CR0,CR1,CR2和CR3. 这几个寄存器中保存全局性和任务无关的机器状态. CR0中包含了6个预定义标志,0位是保 ...

  2. HBase Scan,Get用法

    Scan,get用法 1. get help帮助信息 从下列get用法信息可以看出 get 后面可以跟table表名,rowkey,以及column,value.但是如果想通过get直接获取一个表中的 ...

  3. PHP.45-TP框架商城应用实例-后台20-权限管理-RBAC表构造与代码生成

    权限管理 三张主表{p39_privilege(权限).p39_role(角色).p39_admin(管理)} 两张中间表{p39_role_pri(角色-权限).p39_admin_role(管理- ...

  4. Django学习之天气调查实例(3):部署静态文件CSS、JS、images等(部署环境基于Ubuntu)

    在设计登录界面时,采用了网上下载的登录模板,漂亮,简易.但是在测试和部署时,发现原来模板中采用的js文件和css文件,却着实让我折腾了好几天. 在以往的网页设计中,一般只要把测试站点开启后,网页中的静 ...

  5. leetcode笔记--3 Niim game

    question: You are playing the following Nim Game with your friend: There is a heap of stones on the ...

  6. 代码混淆 iOS

    该方法只能针对有.m.h的类进行混淆,静态库等只有.h文件的没法进行混淆 代码混淆,刚刚看到是不是有点懵逼,反正我是最近才接触到这么个东西,因为之前对于代码和APP,只需要实现功能就好了,根本没有考虑 ...

  7. jdk8 新特性stream().map()

    1.大写字符串列表 1.1 简单的Java示例将Strings列表转换为大写 TestJava8.java package com.mkyong.java8; import java.util.Arr ...

  8. win10激活方法-专业版

    该教程操作思路,Win10家庭版升为专业版,然后激活版本 首先,进入设置→关于看到如下页面: 接着,进入实操阶段: 第一步   在激活版面输入密匙   ( 把家庭版升级为专业版 ) DR9VN-GF3 ...

  9. HDU 4717 The Moving Points(三分法)(2013 ACM/ICPC Asia Regional Online ―― Warmup2)

    Description There are N points in total. Every point moves in certain direction and certain speed. W ...

  10. UGUI 代码 动态添加 Event Trigger 的事件

    Additionally, if you need more than just the events provided by default, I'd suggest instead attachi ...