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. 【Java】关于Spring框架的总结 (一)

    本文总结一些关于Spring框架的理解,注意点及基础操作.如果有不对的地方,欢迎批评和建议.大家一起努力吧! Spring 框架简介 Spring 是一个开源框架,是为了解决企业应用程序开发复杂性而创 ...

  2. Thymeleaf 常用th标签基础整理

    (一)Thymeleaf 是个什么?      简单说, Thymeleaf 是一个跟 Velocity.FreeMarker 类似的模板引擎,它可以完全替代 JSP .相较与其他的模板引擎,它有如下 ...

  3. 【HNOI2008】玩具装箱TOY & 斜率优化学习笔记

    题目 P教授要去看奥运,但是他舍不下他的玩具,于是他决定把所有的玩具运到北京.他使用自己的压缩器进行压缩,其可以将任意物品变成一堆,再放到一种特殊的一维容器中.P教授有编号为 \(1\cdots N\ ...

  4. mysql 5.7.18 源码安装笔记

    之所以贴出这样一篇笔记呢?主要是因为很久之前,源码安装MySQL的时候,碰到了太多太多的坎坷. 如果你有兴趣进行源码安装,那么请不要以这篇文章为标准,因为每个人的及其环境等其他因素还是差距比较大的. ...

  5. Page Object 设计模式介绍

    Page Object 是 Selenium 自动化测试项目开发实践的最佳设计模式之一,Page Object 的主要体现于对界面交互细节的封装,这样可以使测试案例更关注与业务而非界面细节,提高测试案 ...

  6. CSS : @media 示例

    .example { padding: 20px; color: white; } /* Extra small devices (phones, 600px and down) */ @media ...

  7. PAT——甲级1012:The Best Rank(有坑)

    1012 The Best Rank (25 point(s)) To evaluate the performance of our first year CS majored students, ...

  8. HDU 4714 Tree2cycle(树状DP)(2013 ACM/ICPC Asia Regional Online ―― Warmup)

    Description A tree with N nodes and N-1 edges is given. To connect or disconnect one edge, we need 1 ...

  9. 并查集——poj1611(入门)

    传送门:The Suspects 并查集水题 #include <iostream> #include <cstdio> #include <algorithm> ...

  10. 正则匹配java多行注释

    类似: /** * This method was generated by MyBatis Generator. * This method returns the value of the dat ...