本人在面试的时候被问到:如何使一段不定宽高的文字垂直居中呢?

现在来总结一下:

在body中写入结构

<div id="main">
    <div id="login">
        djshdk awjdsd sede sfcdf vdj sh dkaw jds dse desf cdf vd jsh dkawjd sds ede sfcdfv vd jsh dkawjd sds ede sfcdfv.
    </div>
</div>

方法一:

#main{
position: relative;    //在父元素中使用相对定位
width: 200px;
height: 200px;
overflow: hidden;
background-color: #ff0;
padding: 10px;
}
#login{
position: absolute;   /*在子元素中使用绝对定位*/
top:50%;                /*距离相对于父元素的50%的高*/

left:50%;

background-color: #eee;
-webkit-transform:translate(-50%,-50%);    /*CSS3的样式,:translate(-50%,-50%)相对于自己距离x轴和y轴的-50%*/
}

方法二:

#main{
width: 200px;
height: 200px;
background-color: #eee;
display: table;    /*让标签元素以表格的形式呈现*/
}
#login{
display: table-cell;    /*ie7和ie6都不能识别 display: table-cell;*/
vertical-align: middle;
}

今天是第一次写随笔,从基础开始。加油!

不定宽高的文字在div中垂直居中的更多相关文章

  1. 未知行数的文字在div中垂直居中

    今天工作中遇到一个问题,就是未知行数的文字在div中怎么垂直居中,如下面的3个图: 图1 图2 图3 图1是2行文字的效果,图2是不经过css垂直居中处理的效果,图3是经过css垂直居中后的效果,ht ...

  2. 一个未知宽高的元素在div中垂直水平居中

    <body> <div id="#div1"> <img src="img1.png"></img> </ ...

  3. 设置文字在div中垂直居中,使用line-height

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-02-19) line-height 行间距 详细使用方法:http://www.w3school.com.cn/css/pr ...

  4. css实现div不定宽高垂直水平居中解决方案

    在项目中我们经常能碰见然图片垂直水平居中,不定宽高的div垂直水平居中,等等~~ 现在我将介绍我所知道的几种用css来解决的几种方案. 1.父元素text-align:center;display:t ...

  5. css实现不定宽高的div水平、垂直居中

    一共有三个方案: 1,第一种方案主要使用了css3中transform进行元素偏移,效果非常好 这方法功能很强大,也比较灵活,不仅仅局限在实现居中显示.  兼容方面也一样拿IE来做比较,第二种方法IE ...

  6. Css动画形式弹出遮罩层,内容区上下左右居中于不定宽高的容器中

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

  7. 不定宽高的DIV,垂直水平居中

    1.怎么让一个不定宽高的DIV,垂直水平居中? 答:1)使用CSS方法. 父盒子设置: display:table-cell; text-align:center; vertical-align:mi ...

  8. css两种常用的不定宽高的水平垂直居中方法,记住它,不再为样式发愁

    css 几种常用的简单容易记住的水平垂直居中方法 前言 正文 第一种方法 第二种方法 结束语 前言 我们在设计网页时,会大量的运用到水平垂直居中,如果知道元素的宽高,那水平垂直居中是很简单的,无非是用 ...

  9. 文字在div中水平和垂直居中的的css样式

    文字在div中水平和垂直居中的的css样式 text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ 示例如下: HTML元素 & ...

随机推荐

  1. 【python跨目录调用】结合自己遇到的问题到解决问题,作个记录

    写PO的时候,想把page和case 文件分开存不同的文件夹,但是在调用模块的时候就出现了问题.后来终于解决了,记录下 ---------------------------------------- ...

  2. [转][Java]使用Spring配合Junit进行单元测试的总结

    http://www.51testing.com/html/14/n-1408814.html 1.直接对spring中注入的bean进行测试(以DAO为例): 在测试类上添加@RunWith注解指定 ...

  3. 瀑布模型,(增量开发)渐增式开发,原型化开发,统一过程模型(RUP)

    瀑布模型:设计在开发阶段 瀑布模型有以下优点 1)为项目提供了按阶段划分的检查点. 2)当前一阶段完成后,您只需要去关注后续阶段. 3)可在迭代模型中应用瀑布模型. 增量迭代应用于瀑布模型.迭代1解决 ...

  4. C++_基础5-内存模型

    C++为在内存中存储数据提供了多种选择: 可以选择数据保留在内存中的时间长度(存储持续性): 程序的哪一部分可以访问数据(作用域和链接): 可以使用new来动态地分配内存:定位new运算符提供了这种技 ...

  5. C - 思考使用差分简化区间操作

    FJ's N (1 ≤ N ≤ 10,000) cows conveniently indexed 1..N are standing in a line. Each cow has a positi ...

  6. UVA - 10635 LIS LCS转换

    白书例题,元素互不相同通过哈希转换为LIS求LCS #include<iostream> #include<algorithm> #include<cstdio> ...

  7. window 中安装 hadoop

    win10上部署Hadoop-2.7.3——非Cygwin.非虚拟机   开始接触Hadoop,听人说一般都是在Lunix下部署Hadoop,但是本人Lunix不是很了解,所以Google以下如何在W ...

  8. 中间件使用之(UA,IP,selenium)的使用

    一.UA池:User-Agent池 - 作用:尽可能多的将scrapy工程中的请求伪装成不同类型的浏览器身份. - 操作流程: 1.在下载中间件中拦截请求 2.将拦截到的请求的请求头信息中的UA进行篡 ...

  9. SqlSugar ORM框架文档

    http://www.codeisbug.com/Doc/8/1141 SqlSugar入门级教程+实例 (.net core下的)https://www.cnblogs.com/rulasann/p ...

  10. $bzoj1007-HAOI2008$ 水平可见直线 下凸包

    题面描述 在\(xOy\)直角坐标平面上有\(n\)条直线\(L_1,L_2,...,L_n\),若在\(y\)值为正无穷大处往下看,能见到\(L_i\)的某个子线段,则称\(L_i\)为可见的,否则 ...