要让div内部元素垂直居中，则给div加上此css样式：

.div-vertical-middle{
  height:200px;
  width:304px;
  line-height:50px;
  vertical-align:middle;
  display:table-cell;
}

要让div内部元素水平居中，则给div加上此css样式：

.div-horizontal-middle{

 height:200px;

 width:304px;

 line-height:50px;

 text-align:center;

 display:table;

}

下面是一段demo：

<html>

<head>

<title>居中测试</title>

<style>

*{

 margin:0;

 padding:0;

}

.div-vertical-middle{

 height:200px;

 width:304px;

 line-height:50px;

 vertical-align:middle;

 display:table-cell;

}

.div-horizontal-middle{

 height:200px;

 width:304px;

 line-height:50px;

 text-align:center;

 display:table;

}

.div-middle-out{

 border:2px solid #000;

 width:500px;

 height:500px;

 margin:50px auto;

 display:table;

}

.div-middle-in{

 text-align:center;

 display:table-cell;

 vertical-align:middle;

}

</style>

</head>

<body>

<div class="div-vertical-middle" style="background:yellow;">

  <h2>这是垂直居中</h2>

</div>

<div class="div-horizontal-middle" style="background:red;">

  <h2>这是水平居中</h2>

</div>

<div class="div-middle-out" style="background:green;">

  <div class="div-middle-in">

    <h2>水平垂直居中</h2>

  </div>

</div>

</body>

</html>

div内部元素居中的更多相关文章

  1. css固定宽高DIV内部元素垂直居中的方法

    应用案例 案例是这样的,一个外层div,高宽是固定的,但是里面内容不是固定的.很多朋友的做法是头部加一个padding或者margin,这样,里面内容显得貌似是居中了,但是假如内容变化,这样头部的固定 ...

  2. HTML/CSS：div居中和div内部元素垂直居中（1）

    div居中 div水平和垂直居中,text-align和vertical-align不起作用,因为标签div没有这两个属性,所以再css中设置这两个值不能居中的效果 1. div水平居中:设置marg ...

  3. <转载>使CSS文字图片div元素居中方法之水平居中的几个方法

    文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决 ...

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

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

  5. 如何居中div？如何居中一个浮动元素？

    如何居中div? 给div设置一个宽度,然后添加margin:0 auto属性 div{ width:200px; margin:0 auto; } 如何居中一个浮动元素? <!DOCTYPE ...

  6. Vue在点击内部元素时（获得焦点），怎样让外部div元素样式变化？

    问题: div内部有很多元素,div. p. span .input等,各元素有嵌套,现在点击某元素时需要最外面这个div边框高亮,例如,点击了input开始输入 假设html 结构如下  <d ...

  7. CSS实现元素居中原理解析

    在 CSS 中要设置元素水平垂直居中是一个非常常见的需求了.但就是这样一个从理论上来看似乎实现起来极其简单的,在实践中,它往往难住了很多人. 让元素水平居中相对比较简单:如果它是一个行内元素,就对它的 ...

  8. css菜鸟学习之text-align属性，行内元素，块级元素居中详解

    一.text-align属性 1.text-align用来设置元素中的的文本对齐方式,例如:如果需要设置图片的对齐方式,需要设置图片的父元素的text-align属性: 2.text-align只对文 ...

  9. Bootstrap 元素居中设置

    一.Bootstrap水平居中 1. 文本:class ="text-center" 2. 图片居中:class = "center-block" 3.其他元素 ...

随机推荐

  1. JVM内存

    大多数 JVM 将内存区域划分为 Method Area(Non-Heap)(方法区) ,Heap(堆) , Program Counter Register(程序计数器) ,   VM Stack( ...

  2. 创建Win32图形界面应用程序

    没有什么比创建一个Win32图形界面应用程序能让Win32汇编初学者更兴奋的了! 然而,对于像我这样没有代码便会陷入困境的人来说,看到下面的代码总能让人为之一振,百余行的代码使得Win32GUI编程并 ...

  3. BZOJ 2142: 礼物

    模非素数下的排列组合，简直凶残 调着调着就过了= = 都不知道怎么过的= = 直接上链接http://hi.baidu.com/aekdycoin/blog/item/147620832b567eb4 ...

  4. MySQL Innodb 并发涉及参数

    1 参数作用 MySQL的各个插件式引擎中,都会对事务及线程做一定的处理和优化.在Innodb引擎中,总是尝试保持 innodb内 操作系统的线程数(暂命名为innodb_thread) 应该小于或等 ...

  5. Linux TCP连接数修改

    一.           文件数限制修改 (1)   vi /etc/security/limits.conf *  soft nofile 10240    *  hard nofile 10240 ...

  6. webpack从0开始---（一）

    换了新环境,同时也有了新目标,从webpack开始. webpack:具体是什么,大家还是自行去看吧,这里就不多做介绍了! 传送门---webpack.github.io 网上的安装方法很多,这里我就 ...

  7. c#基础语句——循环语句（for、while、foreach）

    循环类型:for.while.foreach 循环四要素:初始条件-->循环条件-->循环体-->状态改变 1.for 格式: for(初始条件:循环条件:状态改变) {循环体(br ...

  8. Java日志工具之Log4J

    Log4J与java.util.logging.Logger的使用方式出奇的相似,因此如果先看这篇文章<Java日志工具之java.util.logging.Logger>在来用Log4J ...

  9. npm学习总结

    1.npm run [scripts name]的作用及意义: npm 局部安装的工具包不能像全局安装那样直接执行命令行,但可写成命令行执行语句,通过npm run来运行,该命令可将node_modu ...

  10. APUE学习心得

    APUE学习心得 Chapter 3 IO 3.2 文件描述符 文件描述符是一个非负整数.当打开 一个现存文件或创建一个新文件时,内核向进程返回一个文件描述符.0 标准输入,1 标准输出, 2 标准错 ...