内容水平居中

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. sublime text3083 破解 插件汉化

      sublime text  注册码 1. Sublime Text 2.x 版本 —– BEGIN LICENSE —– Andrew Weber Single User License EA7E ...

  2. opencv学习笔记（七）SVM+HOG

    opencv学习笔记(七)SVM+HOG 一.简介 方向梯度直方图(Histogram of Oriented Gradient,HOG)特征是一种在计算机视觉和图像处理中用来进行物体检测的特征描述子 ...

  3. 支持向量机（SVM）简介

    主要内容 一:SVM简介 二:线性分类 三:分类间隔 四:核函数 五:松弛变量 SVM简介 支持向量机(support vector Machine)是由Cortes和Vapnik于1995年首先提出 ...

  4. makefile_2

    我们的工程有 8 个 C 文件,和 3 个头文件,我们要写一个 Makefile 来告诉 make 命令如何编译和链接这几个文件.我们的规则是:1)如果这个工程没有编译过,那么我们的所有 C 文件都要 ...

  5. linux 禁止ping

    [root@86 sysconfig]# echo 1 > /proc/sys/net/ipv4/icmp_echo_ignore_all #关闭ping [root@86 sysconfig] ...

  6. jdk

    mkdir java mv jdk1.7.0_71/ java/ [root@centos02 src]# java -version java version "1.7.0_71" ...

  7. 1.单件模式(Singleton Pattern)

    意图:为了保证一个类仅有一个实例,并提供一个访问它的全局访问点. 1.简单实现(多线程有可能产生多个实例) public class CommonSigleton { /// <summary& ...

  8. android 兼容性测试 CTS 测试过程（实践测试验证通过）

    source: http://blog.csdn.net/jianguo_liao19840726/article/details/7222814 写这个博客的时候是为了记忆,建议大家还是看官方的说明 ...

  9. linux tricks 之数据对齐。

    转载:http://blog.chinaunix.net/uid-20608849-id-3027953.html   内核为了保持最大的兼容性和代码灵活性,不可能直接对某个数据类型定义它的大小范围. ...

  10. MATLAB学习笔记（二）——主要是MATLAB的矩阵知识

    PS:主要是讲解矩阵的相应的实现方法,其实MATLAB的很大一部分的优势,就是集成了矩阵级别的运算,并以此为特点,可以进行多维空间上的验证. 让我们懂得了原来线性代数如此有用= - =. (一)MAT ...