内容水平居中

text-align: center;

内容垂直居中

/*第一种 行内垂直居中*/

    height: 43px;

    line-height:43px;

   /*我们将行距增加到和整个div一样高

    line-height:43px;然后插入文字，就垂直居中了。*/

/*第二种*/

    vertical-align:middle;

    display:table-cell;  /*将对象作为表格单元格显示 */

此div水平居中

margin:0px auto;

此div垂直居中

/*1，设置position:realitive;

   2，设置top：-50%;

   3，设置margin-top：....减去此元素的高度的一半+减去此元素的补白+减去此元素的边框宽度

   4，加入此元素有兄弟元素，那+减去兄弟元素的高度

*/

           position: relative;

            top: 50%;

            margin-top: -350px; /*width/2+padding+border +兄弟节点高度200/2px+30px+20px+200*/

DEMO:div内容水平垂直居中+div内的div水平垂直居中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script src="../js/jquery-1.11.1.min.js" type="text/javascript"></script>

    <style type="text/css">

        *

        {

            padding: 0px;

            margin: 0px;

        }

        #test1

        {

            margin: 0px auto;

            padding: 0px;

            width: 400px;

            height: 400px;

            border: 2px solid red;

            text-align: center; /*会让此元素的内容和子元素的内容水平居中，注意：此元素和子元素并不水平居中*/

        }

        span

        {

            line-height: 200px; /* font-size: 200px;*/

        }

        #test2

        {

            margin: 0px auto; /*会让此元素水平居中，注意：此元素垂直并不居中*/

            position: relative;

            top: 50%;

            margin-top: -350px; /*width/2+padding+border 200/2px+30px+20px*/

            width: 200px;

            height: 200px;

            padding: 30px;

            border: 20px dotted blue; /* display: table-cell;     此元素内容垂直居中第一种写法

            vertical-align: middle;*/

            line-height: 200px; /*  此元素内容垂直居中第二种写法，和div高度相等设置行高*/

        }

    </style>

</head>

<body>

    <div id="test1">

        <span>我是test1的span标签，别弄错了</span>

        <div id="test2">

            我是test1的字体内容

        </div>

    </div>

</body>

</html>

结果

div居中（内容+元素：水平+垂直）的更多相关文章

  1. css3-7 如何让页面元素水平垂直都居中（元素定位要用css定位属性）

    css3-7 如何让页面元素水平垂直都居中(元素定位要用css定位属性) 一.总结 一句话总结:元素定位要用css定位属性,而且一般脱离文档流更加好操作.先设置为绝对定位,上左都50%,然后margi ...

  2. CSS 各类 块级元素 行级元素 水平 垂直 居中问题

    元素的居中问题是每个初学者碰到的第一个大问题,在此我总结了下各种块级 行级 水平 垂直 的居中方法,并尽量给出代码实例. 首先请先明白块级元素和行级元素的区别 行级元素 一块级元素 1 水平居中: ( ...

  3. Div 内部所有元素 全部垂直对齐

    http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div How it works: ...

  4. css 元素水平垂直方向居中

    html部分 <div class="parent"> <div class="child"> - -居中- - </div> ...

  5. div里面的元素垂直均匀分布 按钮引发地址栏出现问号 判断一个数组是否为空 div底部居中 路由传参接受参数

    一个固定高度的div的子元素 在垂直 方向上平均分布 .important-dec{ height: 121px; flex-direction: column; display: flex; jus ...

  6. CSS元素水平垂直居中方法总结（主要对大漠以及张鑫旭博客所述方法进行了归纳）

    本文主要是对主流居中方法进行了归纳,有些地方甚至就是把别人的代码直接复制过来的,没有什么自己的东西,除了大漠以及张鑫旭的方法外,还有来自司徒正美.怿飞博客的几个方法 以下方法,由于测试环境的原因,IE ...

  7. position:absolute和margin：auto 连用实现元素水平垂直居中

    有时候,要实现一些元素水平垂直都居中,这部分元素呢 可能大小未知,例如一些图片或者是一些未知大小的块元素. 利用绝对定位可以将要居中的元素脱离文档流. position: absolute; left ...

  8. 小div在大div里面水平垂直都居中的实现方法

    关于如何设置小盒子在大盒子里面水平垂直方向同时居中的实现方法有很多种,下面仅列举了常用的几种. 首先看一下要实现的效果图及对应的html代码: <div class="parent&q ...

  9. div里面的元素在【垂直 方向】上水平分布 使用calc()函数动态计算

    1==>如何让div里面的元素在[垂直 方向]上水平分布.important-dec{ height: 121px; //必须固定高度 flex-direction: column; //垂直排 ...

  10. html+css实现图片或元素的垂直、水平同时居中的多种方法

    实现元素或图片的上下.左右居中的三种方法 效果图如下: 方法一:利用vertical-align属性实现图片上下居中 先设置父元素样式text-align: center,实现图片左右居中,给图片添加 ...

随机推荐

  1. 【好用的小技巧】win8兼容、网页不让复制

    1.今天下了个matlab7,我用的是win8系统,不兼容. 解决:鼠标右键matlab7的快捷键,点击属性,选择兼容性,选择window vista即可运行 2.在一个 网页上看到一个对自己很有帮助 ...

  2. Jam的计数法（codevs 1140）

    题目描述 Description Jam是个喜欢标新立异的科学怪人.他不使用阿拉伯数字计数,而是使用小写英文字母计数,他觉得这样做,会使世界更加丰富多彩.在他的计数法中,每个数字的位数都是相同的(使用 ...

  3. Repairing Company（poj 3216）

    题目大意: 有Q个地点,告诉你Q个地点之间的相互距离(从i地点赶到j地点需要的时间).有M项任务, 给你M项任务所在的地点block.开始时间start和任务完成需要时间time.一个工人只有在 他准 ...

  4. 查看LINUX当前负载

    Linux的负载高,主要是由于CPU使用.内存使用.IO消耗三部分构成.任意一项使用过多,都将导致服务器负载的急剧攀升. [root@ok Desktop]# w 20:41:47 up  2:48, ...

  5. show processlist

    mysql> show processlist; #mysql服务器查看有那些主机连进来,并列出它们查什么库 +-----+------+-----------+------+--------- ...

  6. Man简单介绍

    转自:http://os.51cto.com/art/201312/425525.htm Linux系统提供了相对比较丰富的帮助手册(man),man是manual的缩写,在日常linux系统管理中经 ...

  7. TypeC一个微软开发的超简单.NET依赖注入/IoC容器

    控制反转(IoC,Inversion of Control)是由Martin Fowler总结出来的一种设计模式,用来减少代码间的耦合.一般而言,控制反转分为依赖注入(Dependency Injec ...

  8. Visual Studio 2015和ASP.NET 5中可用的前端开发工具集

    最近微软发布了一本白皮书,谈到了一些可以和Visual Studio 2015和ASP.NET 5配合使用的JS/前端Web开发工具(比如:函数库.任务执行器.框架等). 由于现在前端开发的生态系统在 ...

  9. java写入文件的几种方法分享

    转自:http://www.jb51.net/article/47062.htm 一,FileWritter写入文件 FileWritter, 字符流写入字符到文件.默认情况下,它会使用新的内容取代所 ...

  10. org.apache.log4j与org.apache.commons.logging这两个包有什么区别

    apache common logging是一种log的框架接口,它本身并不实现log记录的功能,而是在运行时动态查找目前存在的日志库,调用相关的日志函数,从而隐藏具体的日志实现log4j是具体的日志 ...