要让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. JAVA 命令行参数解析，org.apache.commons.cli的使用

    maven依赖引入 <dependency> <groupId>commons-cli</groupId> <artifactId>commons-cl ...

  2. Tinyshell: 一个简易的shell命令解释器

    这是自己最近学习Linux系统编程之后写的一个练手的小程序,能很好地复习系统编程中的进程管理.信号.管道.文件等内容. 通过回顾写的过程中遇到的问题的形式记录程序的关键点,最后给出完整程序代码. 0. ...

  3. 【CNMP系列】CentOS7.0下安装FTP服务

    一个小插曲,安装一个FTP服务,便于和远程服务器的文件沟通.后续我们会讲到如何使用Capistrano配合git完成服务器的代码部署以及发布流程.现在,代码先走FTP吧,挺稳. FTP简介 FTP 是 ...

  4. Jsp——http status 404 问题

    今天学习Jspapplication内置对象的时候突然碰到了一个问题——http status 404 发生了什么? 提示The requested resource is not available ...

  5. Asp.net mvc 4.0 高级编程 百度云下载

    Asp.net mvc 4.0 高级编程 百度云下载地址:链接:http://pan.baidu.com/s/1o6zFvOe 密码:xyss 1.基于 ASP.NET MVC4.0 + WebAPI ...

  6. Android开发，Eclipse创建aidl接口时，出错

    Android开发中,当我们需要调用远程Service时,我们一般通过远程接口(RMI)来实现的,而Android的RMI需要AIDL(Android Interface Definition Lan ...

  7. Docker存储驱动之OverlayFS简介

    简介 OverlayFS是一种和AUFS很类似的文件系统,与AUFS相比,OverlayFS有以下特性: 1) 更简单地设计: 2) 从3.18开始,就进入了Linux内核主线: 3) 可能更快一些. ...

  8. WebStorm 自定义字体+颜色+语法高亮+导入导出用户设置

    WebStorm :是jetbrains公司旗下一款JavaScript 开发工具.被广大中国JS开发者誉为“Web前端开发神器”.“最强大的HTML5编辑器”.“最智能的JavaScript IDE ...

  9. SpringCache缓存初探

    body,table tr { background-color: #fff } table tr td,table tr th { border: 1px solid #ccc; text-alig ...

  10. 令人眼前一亮的下拉式终端 Tilda & Guake

    前言 老夫是 Linux 的老用户. 大一的时候某不方便透露姓名的校内组织给了一个 Fedora 13 的安装光盘,然后老夫学会了重装 Windows. 大二的时候知道了 Ubuntu ,开始在虚拟机 ...