要让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. Ffmpeg 视频教程

    最近一段时间找时间录制了一些Ffmpeg视频教程,还有录制完毕,会持续更新,内容会包含Ffmeg保存文件,网络流转发, 编码,解码,播放器制作,以及服务端搭建等等,适合初学者,有需要的朋友的可以关注: ...

  2. Javascript—②函数

    新手Perfect教程之Javascript②教程-函数 前言:上回我们是从hello world开始的,本期将会讲"函数" 在学自定义函数之前,先了解几个已经定义好的函数: 1 ...

  3. Bootstrap记录

    左侧 导航下拉: <li class="dropdown"> <a href="#" class="dropdown-toggle& ...

  4. GDOI2015 解题报告

    首先嘛现在发现题目这么水我还啥都没想出来正是呵呵了.接下来就口胡下GDOI的题解吧 PS:代码什么的要请联系我 题目:快戳我 Day1: T1:这个嘛,可以先找到起点所能到达的每个点然后判断该点能否到 ...

  5. BZOJ 3926: [Zjoi20150]诸神眷顾的幻想乡（后缀自动机）

    被这道题坑了= =只与一个空地相连的空地不超过20个只与一个空地相连的空地不超过20个 因为很重要所以说两遍 就是说儿子节点最多只有20个 把这20个节点作为根遍历一遍所得到的tire所得到的所有不同 ...

  6. 简述.jpg .Gif .png-8 .png-24的区别

    最近有很多朋友在开发过程中有时候会遇到图片加载不清晰,透明度失真,或者对图片进行操作之后造成图片损耗的现象,在这里给大家简单介绍一下常用的几种图片格式之间的区别 Gif格式特点: 1.透明性,Gif是 ...

  7. Windows Form线程同步

    .Net多线程开发中,经常需要启动工作线程Worker thread处理某些事情,而工作线程中又需要更新主线程UI thread的界面状态.我们只能在主线程中操作界面控件,否则.Net会抛出异常. 那 ...

  8. 从零开始--Spring项目整合(2)整合SpringMVC

    1.pom.xml 定义版本 <properties> <spring.version>4.2.7.RELEASE</spring.version> <jac ...

  9. Linux JDK+TOMCAT+MYSQL+redis 安装日志

    检查是否安装iptables #先检查是否安装了iptablesservice iptables status#安装iptablesyum install -y iptables#升级iptables ...

  10. DAX/PowerBI系列 - 写在前面

    今天讲的主角是: 不过,先上一个图--2017 Gartner商业智能和数据分析魔力象限 DAX关注这个玩意儿有好一段时间了,刚开始的时候(2014年?)是从Excel里面认识的.2014年当时公司用 ...