`
fyting
  • 浏览: 215333 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

div垂直居中的几种办法

CSSIEBlogHTML 
阅读更多
以前看到dlee讲过，将line-height设置为与DIV的高度相同就可以居中 
<style type="text/css">
<!--
.con_div{
width:400px;
height:300px;
border:1px solid #777;
text-align:center;
display:table-cell;
vertical-align:middle;
background:red;
color:#fff;
line-height:300px;
}
-->
</style>

<div class="con_div">
测试内容ddddddddddd
</div>


今天又在这里看到的一种方法，使用了CSS的vertical-align属性? 
<style type="text/css">
<!--
.con_div{
width:400px;
height:300px;
border:1px solid #777;
text-align:center;
display:table-cell;
vertical-align:middle;
background:red;
color:#fff
}
/*FOR IE*/
.fixie{
width:0;
height:100%;
display:inline-block;
vertical-align:middle;
}
-->
</style>

<div class="con_div">
<span class="fixie"></span>
测试内容
</div>

再次看到一种 
<style>
#warp {
  position: absolute;
  width:500px;
  height:200px;
  left:50%;
  top:50%;
  margin-left:-250px;
  margin-top:-100px;
  border: solid 3px red;
}
</style>
<body>
  <div id=warp>Test</div>
</body>
分享到：
| Code Review工具Jupiter的使用
评论
1 楼 小兵张嘎 2008-12-03  
margin-top:-100px;top:50%;

对于多内嵌div 还是不好用的----达不到垂直方向的居中啊
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    div 垂直居中的多种方法详细介绍

    在说到这个问题的时候，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？... 相关教程：div水平居中的N种方法 一、单行垂直居中 如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要

    图片垂直居中的代码的几种方法

    图片垂直居中的css+div代码的几种方法编写

    图片的水平垂直居中

    这是几种图片在div层的居中方法，其中垂直居中不好实现的问题是兼容性问题，其中有兼容性不错的居中方法实例。

    CSS文本和div垂直居中方法总结

    在样式布局中，我们经常碰到需要将元素居中。通过css实现元素的水平居中较为简单：对文本，只需要对其父级元素设置text-align: center;...因此我们需要通过别的方法去实现元素的垂直居中，下面我总结了几种了常用垂直居

    详解html的几种水平垂直居中的方式（基础）

    所以我给大家总结式的列出几种常用的水平垂直居中的方法。 第一种方法 &lt;!--html盒子代码--&gt; &lt;!--水平垂直居中--&gt; &lt;div class=Centered1&gt; &lt;p&gt;d第一种 &lt;/div&gt; &lt;!-css样式部分--&gt; .Centered1{ ...

    css3 flex实现div内容水平垂直居中的几种方法

    一、flex-direction: （元素排列方向） ※ flex-direction:row （横向从左到右排列==左对齐） ※ flex-direction:row-reverse （与row 相反）  ※ flex-direction:column （从上往下排列==顶对齐） ...

    CSS实现垂直居中的几种方法

    有些方法在一些浏览器中无效，因此，到底选择哪种方法好，还要看具体情况。 方法一： 这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。 复制代码代码如下: &lt;div ...

    div+css有实例,易学易懂

    4.5.1 调用样式表的几种方法 4.5.2 应用样式的优先级 4.6 网页头部实例 第 5 章 CSS 基本布局属性 第50 页 5.1 页面的制作流程和整体分析 5.2 元素定位基础知识 5.2.1 块元素的默认排列 5.2.2 内联元素的默认排列 ...

    div+css垂直居中的五种实现方法

    之前看到很多人一直都问这个问题，不过当时我没当一回事，因为在 CSS 中要垂直居中，多数是在有高度的情况下，或者容器高度不定的情况下才用，看上去比较舒服，而且实现的方法也不少。不过最近有人问了几个例子。...

    CSS3实现水平居中、垂直居中、水平垂直居中的实例代码

    作为一个前端小猴子，不管是面试的时候还是工作中，我们都会或多或少的遇到“使用css居中”的效果，今天就写一篇关于css垂直水平居中的几种方法。 栗子1：从最简单的水平居中开始 margin: 0 auto; 块级元素使用...

    基于jQuery实现的水平和垂直居中的div窗口

    在建立网页布局的时候，我们经常会面临一个问题，就是让一个div实现水平和垂直居中，虽然好几种方式实现，但是今天介绍时我最喜欢的方法，通过css和jQuery实现。

    HTML对于元素水平垂直居中的探讨

    我们在设计页面的时候，经常要把DIV居中显示，而且是相对页面窗口水平和垂直方向居中显示，如让登录窗口居中显示。 到现在为止，探讨了很多种方法。 HTML： XML/HTML Code复制内容到剪贴板 &lt;body&gt;  &lt;div u...

    css让容器水平垂直居中的7种方式

    这种方法比较多，本文只总结其中的几种，以便加深印象。效果图都为这个： 方法一：position加margin XML/HTML Code复制内容到剪贴板 &lt;div u00a0class=wrap&gt;  &lt;div u00a0class=center&gt;&lt;/div&gt;  &lt;/div&gt;  CSS ...

    css中常用的几种居中方法(推荐)

    今天我们就细数一下几种方法： 1，使用position:absolute,设置left、top、margin-left、margin-top的属性 CSS Code复制内容到剪贴板 .one{ position:absolute; width:200px; height:200px; top:50%;

    JS弹出居中的DIV的代码

    首先再次详细解释一下JS中窗口和网页的几种尺寸属性的含义 document.body.clientWidth（网页可见区域宽）：是指浏览器显示网页的区域宽度，不包括浏览器的边框宽度和垂直滚动条的宽度。大小随着浏览器的窗口大小而...

    CSS 多浏览器兼容性问题及解决方案

    Javascript 多浏览器兼容性问题及解决方案 ...4、div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行

    JQuery&CSS;&CSS;+DIV实例大全.rar

    4.jQuery超炫淡入淡出效果DIV渐变居中弹出框插件下载 5.jquery黑色+蓝色风格DIV提示框示例 6.一款jQuery+DIV居中淡入淡出信息提示框示例 7.一款jQuery可拖动提示窗插件(对话框Dialog插件) 8.一款基于jQuery...

    vue一步步实现alert功能

    原生alert的缺点 会阻塞一切操作，影响用户体验 很多浏览器会默认静止alert，...垂直居中方法有几种可选。我选用的是flex。关键性的css代码如下 .modal-mask{ position: fixed; top: 0; left: 0; right: 0; b

    css实现虚线边框滚动效果的实例代码

    常常看到一种酷炫的效果，鼠标hover一片区域后，区域显示出虚线边框，并且还有线条动画，那么这种效果具体是怎么实现的呢，本文提供了几种思路仅供参考。 基本HTML &lt;div class=box&gt; 测试测试 &lt;/div&gt; Easy-way 通过...

    html入门到放弃笔记

    增加一根水平线，size为5px，宽度为50%，居中对齐，颜色为红色(red) 7、预格式化 作用：保留源文档中的回车 和 空格 的作用 &lt;pre&gt;&lt;/pre&gt; 8、分区元素 1、块分区元素 语法：&lt;div&gt;&lt;/div&gt; 作用：布局 2、行内...

Magicbox
Global site tag (gtag.js) - Google Analytics