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

现在来总结一下:

在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. 一个很棒的PHP缓存类,收藏下

    <?php class Cache { /** 缓存目录 **/ var $CacheDir = './cache'; /** 缓存的文件 **/ var $CacheFile = ''; /* ...

  2. XMLHttpRequest 与 Ajax 概要

    关于XMLHttpRequest 开发者使用XMLHttpRequest对象与服务端进行交互(发送http请求.接受返回数据等),可以在不打断用户下一步操作的情况下刷新局部页面.XMLHttpRequ ...

  3. Jupyter Notebook 使用入门

    Jupyter Notebook 简介与安装 Jupyter Notebook 是一款开放源代码的 Web 应用程序,可让我们创建并共享代码和文档. 它提供了一个环境,你可以在其中记录代码,运行代码, ...

  4. 多线程 NSOpeartion 的使用

    NSOperation简介 相对于 GCD ,具有面向对象的特征,比 GCD 更简单易用,代码可读性强 NSOperatioin 单独使用时, 不具有开辟新线程的能力, 只是同步执行操作, 需要配合 ...

  5. 队列 和 堆栈用python 来实现

    一.利用python列表实现堆栈和队列 堆栈: 堆栈是一个后进先出的数据结构,其工作方式就像生活中常见到的直梯,先进去的人肯定是最后出. 我们可以设置一个类,用列表来存放栈中的元素的信息,利用列表的a ...

  6. python学习之路---day20--面向对象--多继承和super() 函数

    一:python多继承 python多继承中,当一个类继承了多个父类时候,这个类拥有多个父类的所欲非私有的属性 l例子: class A: pass class B(A): pass class C( ...

  7. 关于Manjaro与Ubuntu双系统并存引发的一个boot问题

    事情发生在写下这篇博客的半小时前.笔者的电脑本身是Manjaro+win10双系统并存,因为一些原因要安装ubuntu. 装完ubuntu用了一阵子,想切回manjaro,于是遇到了这个问题. 看到k ...

  8. [BZOJ 5330][SDOI2018] 反回文串

    传送门 怎么说呢,一道不可多得的反演题吧,具体解释之后再补 #include <bits/stdc++.h> using namespace std; #define rep(i,a,b) ...

  9. 洛谷 P3275 [SCOI2011]糖果

    题目链接 题解 差分约束 学过的应该都会做 不会的自行百度,这里不多讲 opt=1 连一条长度为0的双向边 opt=2 (u->v) \(len=-1\) opt=3 (v->u) \(l ...

  10. 洛谷 P2048 BZOJ 2006 [NOI2010]超级钢琴

    题目描述 小Z是一个小有名气的钢琴家,最近C博士送给了小Z一架超级钢琴,小Z希望能够用这架钢琴创作出世界上最美妙的音乐. 这架超级钢琴可以弹奏出n个音符,编号为1至n.第i个音符的美妙度为Ai,其中A ...