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. hoj第三场G-manhattanp ositioning system

    ---恢复内容开始--- 一.题意 在二维坐标系内,给定若干个点和目标点距离该点的曼哈顿距离,求是否存在唯一解使得目标点坐标为整数. 二.题解 重新思考题目模型,考虑曼哈顿距离一定时,几何含义为,以给 ...

  2. python2.7入门---模块(Module)

        来,这次我们就看下Python 模块(Module).它是一个 Python 文件,以 .py 结尾,包含了 Python 对象定义和Python语句.模块让你能够有逻辑地组织你的 Pytho ...

  3. 【转】mysql索引最左匹配原则的理解

    作者:沈杰 链接:https://www.zhihu.com/question/36996520/answer/93256153 来源:知乎 CREATE TABLE `student` ( `id` ...

  4. Android面试收集录 蓝牙与WiFi

    1.打开手机中的蓝牙功能有哪些方法? 法1:使用Intent  ==>new Intent(BluetoothAdaper.ACTION_REQUEST_ENABLE); startActivi ...

  5. java字符流实现文件间的内容复制

    package com.io.demo1; import java.io.FileReader; import java.io.FileWriter; public class TestFileSTr ...

  6. What to do when Enterprise Manager is not able to connect to the database instance (ORA-28001)

    摘自:http://dbtricks.com/?p=34 If you are trying to connect to the Oracle enterprise Manger and you ge ...

  7. Java泛型的基本介绍与使用

    为什么要使用泛型? 在Java中增加泛型之前,泛型程序设计是用继承来实现的,例如ArrayList,只维护Object引用的数组: public class ArrayList{ private Ob ...

  8. JVM 什么时候会触发FGC

    1:System.gc(); 2:老年代满了 没啥好说的从年轻代去往老年代的 3:JDK7或JDK6中永久区满了 得看是否还会有分配,如果没有就不会进行FGC,不过CMS GC下会看到不停地CMS G ...

  9. Ajax跨域请求解决方式

    前端 jQuery方式 .ajax({ type: "POST", url: "http://xxx.com/api/test", dataType: 'jso ...

  10. 1034 Head of a Gang (30 分)(图的遍历or并查集)

    dfs #include<bits/stdc++.h> using namespace std; ; int mp[N][N]; int weight[N]; int vis[N]; ma ...