要让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. Swift3.0 中 Strings/Characters 闲聊

    前言 本篇文章主要浅析字符串\字符在 Swift 和 Objective-C 之间的区别及其简单用法.如有不妥的地方还望大家及时帮忙纠正. 字符串判空 在 swift 语言中空字符串初始化方式常用的有 ...

  2. (二) 从Angular1到Angular2需要的预备知识

    1. TypeScript语法与ES6新特性 写惯了jQ的话突然从ES5跳到ES6,又是个变形的ES6(TypeScript),学习成本确实不低.不过笔者也是从ng1直接上手ng2,对与很多新特性的积 ...

  3. ReactNative入门(1)初识ReactJs

    现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...

  4. [Android] "Failed to find Java version for 'C:\Windows\system32\java.exe"

    Impossible to install SDK r17 on win 7 x64 "Failed to find Java version for 'C:\Windows\system3 ...

  5. 电脑机器刷BIOS

    http://www.51nb.com/forum/viewthread.php?tid=934570&page=1#pid13765036 [原创]hp笔记本刷新bios失败后真的可以恢复吗 ...

  6. Loadrunner之脚本编写

    先打开loadrunner的服务器(打开成功之后会出现一个绿色的X) 以订票系统为例(http://127.0.0.1:1080/WebTours/) 录制一个登陆的脚本. 利用C语言编写一个简单的脚 ...

  7. Oracle排序分析函数

    在Oracle自拓展SQL功能中,分析函数(Analytical Function)是非常强大的工具. 本篇我们介绍几个Oracle典型的排序分析函数,来帮助我们解决实际问题. 1.从rownum谈起 ...

  8. Java基础之路(一)下--引用数据类型之数组

    上次我们说了java的基础数据类型,今天我们就来说一下引用数据类型中的数组. 什么是数组 数组:存储在一个连续的内存块中的相同数据类型(引用数据类型)的元素集合. 数组中的每一个数据称之为数组元素,数 ...

  9. 怎么用php语言来做文件缓存

    使用缓存能够让我们的程序访问起来更加快速,缓存可以减少对数据库的操作,体验起来更好一些,对服务器的压力也小一些,当然服务速度很快 php文件执行完之后产生的解析完的数据,保存成静态的网页,下次打开的这 ...

  10. 赵本山 教你如何在实战项目中使用WCF

    我们都知道调用WCF直接在Service References中引用可以远程调用的WCF Url就行了. 但是我们想过没,在Development环境中可以这样做,但是QA.UAT.Productio ...