内容水平居中

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. 【USACO】checker

    一看题目 经典的8皇后问题 不过是皇后数量可变而已 不用想 回溯法. 需要个生成每次可选择序列的函数, 在存储可选择的序列时按照先大后小的顺序排的.这样每次找最小和去掉最小都很方便,只要有个记录数量的 ...

  2. stm32学习笔记----双串口同时打开时的printf()问题

    stm32学习笔记----双串口同时打开时的printf()问题 最近因为要使用串口2外接PN532芯片实现通信,另一方面,要使用串口1来将一些提示信息输出到上位机,于是重定义了printf(),使其 ...

  3. ScrollView与TableView实现选择效果

    在cocos2dx中,ScrollView与TableView都可以实现选择效果,其中ScrollView较为原始,TableView的格子大小可以不与winSize一样大. ScrollView实现 ...

  4. 归并排序的分析与Java实现

    归并操作(merge),也叫归并算法,指的是将两个已经排序的序列合并成一个序列的操作.归并排序算法依赖归并操作.该算法是采用分治法(Divide and Conquer)的一个非常典型的应用.归并排序 ...

  5. obj-m

    转自:http://blog.sina.com.cn/s/blog_693301190100sxoi.html obj-m (转帖) 目标定义是Kbuild Makefile的主要部分,也是核心部分. ...

  6. Android读书笔记0-从零开始

    可以有千万个理由,但是结果就在这里,我开始对Android产生兴趣,于是决定学点啥.啥都不说,单刀入正题. 开发环境 啥都不说,直接上图. 只说Windows平台上,下载完直接解压即可.比起VS安装过 ...

  7. PHP生成不重复随机数的方法

    无论是Web应用,还是WAP或者移动应用,随机数都有其用武之地.在最近接触的几个小项目中,我也经常需要和随机数或者随机数组打交道,所以,对于PHP如何产生不重复随机数常用的几种方法小结一下. 方法一: ...

  8. x264码率控制方法介绍

    转自:http://www.bubuko.com/infodetail-471698.html 1.  X264显式支持的一趟码率控制方法有:ABR, CQP, CRF. 缺省方法是CRF.这三种方式 ...

  9. 浅谈K-SVD

    由于工作需要,最近刚刚看了一些K-SVD的介绍,这里给自己做一下小节. K-SVD我们一般是用在字典学习.稀疏编码方面,它可以认为是K-means的一种扩展,http://en.wikipedia.o ...

  10. 【HTML5】input类型

    * email <input type="email" name="user_email" /> * url <input type=&quo ...