要让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. [HBase] - Hbase调优1

    版本:HBase-0.98.6-cdh5.3.6 HBase参数调优 1. zookeeper.session.timeout: 默认90000(毫秒), 控制连接zk的timeout时间.由于hba ...

  2. hadoop编译

    说明: hadoop版本:hadoop-2.5.0-cdh5.3.6 环境:centos6.4 必须可联网 hadoop 下载网址: http://archive.cloudera.com/cdh5/ ...

  3. ！important的理解

    !important用于将当前css代码优先级提升为最高,这个优先级比行内样式更高 但是!important在ie6这种垃圾浏览器下会出现小bug .testClass{ color:blue !im ...

  4. 纪中集训 Day 0？

    好吧昨天的等到今天才来写，现在超不想刷题，来写下blog吧= = 坐了近10H的火车终于来到了中山市 火车上在看空之境界，等有时间补下动画吧= = 到了宿舍各种不习惯（现在才发现还是母校好QAQ）然后 ...

  5. Matlab将三维变量分割为多个二维变量的方法

    最近在处理 Matlab 中的三维矩阵的时候,遇到了一个问题: 假如m 为 5*5*5的矩阵,如果以第三个维度为基础,分割为5个不同的矩阵 m1,m2,m3,m4,应该如何解决? 解决方法:eval函 ...

  6. Javascript几种跨域方式总结

    在客户端编程语言中如javascript,同源策略规定跨域之间的脚本是隔离的,一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法.只有当两个域具有相同的协议,相同的主机,相同的端口时,我们就认定 ...

  7. BOM元素之window对象

    在浏览器中,window对象有双重角色,它既是通过JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象.这意味着在网页中定义的任何一个对象.变量和函数,都以wi ...

  8. iOS仿微博客户端一条微博的布局

    前言 做一个微博客户端的第三方是自学的第一个实践的项目,自从从事iOS工作之后,就把这个项目给搁置了.趁现在过年回来有些空闲时间,再次修改(总觉得项目就是不停地修改).并且记录一点东西,以后可再回头看 ...

  9. vue1升级到vue2的问题

    router 不能用map方法了,需要改router的结构改为 routers= [ { // 当没有匹配路由时默认返回的首页        path:'/index',        compone ...

  10. ASP.NET MVC 使用Uploadify实现多文件异步无刷新上传

    软件技术开发,合作请联系QQ:858-048-581 这里我通过使用uploadify组件来实现异步无刷新多文件上传功能. 1.首先下载组件包uploadify,我这里使用的版本是3.1 2.下载后解 ...