div垂直居中的几种办法 - Simple is better - ITeye博客

`

fyting

浏览: 216543 次
性别:
来自: 成都

最近访客更多访客>>

心_骸

paladin1988

twentwo

lanqian123456

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

greatwqs：标记一下
SpringAOP嵌套调用的解决办法
lengyubing：非常感谢，刚好遇到这个问题
SpringAOP嵌套调用的解决办法
paladin1988：非常感谢。。
Code Review工具Jupiter的使用
niuka：不错不错，小弟学习了。
Code Review工具Jupiter的使用
sunwang810812：读编程思想4,读到这里一直就读不下去,看了你的文章,豁然开朗. ...
java泛型中的上界下界(上限下限)

div垂直居中的几种办法

博客分类：

Web开发

CSS IE Blog HTML

阅读更多

以前看到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>

分享到：

Ruby语法中setter的实现 | Code Review工具Jupiter的使用

2007-06-20 16:11
浏览 60330
评论(1)
查看更多

评论

1 楼小兵张嘎 2008-12-03

margin-top:-100px;top:50%;

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

发表评论

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

相关推荐

DIV水平垂直居中: 首先，我们来探讨CSS中的几种水平垂直居中方法： 1. **Flexbox布局**：这是现代浏览器支持的一种布局方式，可以轻松实现子元素的水平和垂直居中。设置父元素的`display`属性为`flex`，然后添加`align-items: center...

div 垂直居中的多种方法详细介绍: 接下来，我们将详细介绍几种实现`div`垂直居中的方法。首先，针对单行文本的垂直居中，可以通过设置`height`和`line-height`属性实现。当两者值相等时，文本行将垂直居中于容器内。例如，设置`div`的`height`和`...

DIV+CSS DIV居中布局: 在CSS中，居中布局通常涉及以下几种方法： 1. **margin auto**：这是最常见的一种居中方法，适用于知道元素宽度的情况。设置`margin-left`和`margin-right`为`auto`，可以使`<div>`在父容器中水平居中。例如： `...

垂直居中.docx: 本文将总结几种常用的 CSS 垂直居中方法。 1. 单行垂直居中对于单行文字，可以使用设置高度和行高相等的方法实现垂直居中。这种方法简单易行，但需要注意 overflow:hidden 的设置，以防止内容超出容器或产生自动...

CSS设置DIV垂直居中的N种方法兼容IE浏览器: 以上就是实现CSS兼容IE浏览器的DIV垂直居中的多种方法。每种方法都有其适用场景和局限性，开发者可以根据项目需求和目标浏览器范围选择合适的技术。对于兼容性问题，还可以使用条件注释、Modernizr库或者工具如...

div表格垂直居中.docx: 本文将介绍几种CSS方法来实现div表格的垂直居中。 1. **单行内容居中** 对于只有一行内容的情况，只需设置`line-height`与`height`相等，并应用`overflow:hidden`。例如： ```css .middle-demo-1 { height: 4em...

CSS 图片水平垂直居中于DIV: 实现图片水平垂直居中的方法有多种，以下是几种常见且实用的方法： 1. 使用 Flexbox 布局： Flexbox 是现代CSS布局模式，适用于单行或单列的弹性容器。在父容器上设置 `display: flex;`，并使用 `align-items: ...

div垂直居中的N种方法单行/多行文字(未知高度/固定高度): 对于`div`元素，尤其是包含单行或多行文本的情况，有多种方法可以实现垂直居中。以下将详细介绍几种常见的方式： 1. **单行垂直居中** 对于只有一行文字的`div`，我们可以利用`line-height`属性来实现垂直居中。...

多行文字实现垂直居中: 以上就是使用div和CSS实现多行文字垂直居中的几种常见方法，每种都有其适用场景和兼容性考虑。在实际项目中，应根据具体需求和目标浏览器范围选择合适的方法。在提供的"多行文字实现垂直居中.html"文件中，你可以...

图片的水平垂直居中: 接下来，我们将探讨几种实现垂直居中的方法： 1. **Flexbox布局** - CSS Flexible Box Layout Module（Flexbox）是现代浏览器支持的布局模型，非常适用于创建弹性容器和元素的居中。以下代码演示了如何使用Flexbox...

图片垂直居中的代码的几种方法: 本文将深入探讨四种不同的CSS方法，用于实现图片在div容器内的垂直居中，每种方法都有其适用场景和独特之处。 ### 第一种方法：使用`table-cell`属性这种方法的核心在于将div设置为`table-cell`，这样可以使其...

CSS网页布局DIV水平居中的各种方法: 这里我们将详细探讨几种实现这一目标的方法。首先，我们要明确的是，`vertical-align`属性主要用于表格元素（如`<td>`、`<th>`、`<caption>`）的垂直对齐，而不是用于`<div>`或`<span>`这类块级或内联块级元素的...

css水平垂直居中: ### CSS 水平垂直居中的实现方法在前端开发中，经常需要将元素在页面中进行水平垂直居中处理，特别是在响应式布局或者需要精确控制元素位置的情况下尤为重要。本篇文章将详细介绍如何通过 CSS 实现内容的水平垂直...

CSS实现垂直居中的几种实现方式.pdf: 总的来说，CSS实现垂直居中有多种方法，每种方法都有其适用场景和限制。开发者需要根据项目需求和目标浏览器范围选择合适的技术。随着技术的发展，如Flexbox和Grid布局的普及，实现垂直居中变得更加便捷和一致，但也...

CSS网页布局DIV水平居中的各种方法[参考].pdf: 本文将详细介绍几种不同的方法来实现这一目标。首先，对于单行垂直居中的情况，我们可以利用CSS的`height`和`line-height`属性。当一个容器内只有一行文字时，如果将这两个属性值设置为相同，文字就会垂直居中。...

CSS实现垂直居中的几种实现方式.docx: 根据标题"CSS实现垂直居中的几种实现方式"以及描述中提到的内外元素高度情况，我们可以深入探讨几种常用的垂直居中方法。首先，当内外元素高度全部确定时，有以下几种常见策略： 1. **使用line-height**：这是一...

使用bootstrap的H5页面登录框自适应水平居中、垂直居中: 对于垂直居中，Bootstrap本身没有提供内置的解决方案，但我们可以通过以下几种方法来实现： 1. 使用Flexbox：Bootstrap4开始支持Flexbox，可以为父容器添加`d-flex`, `align-items-center`类，这将在所有支持...

CSS文本和div垂直居中方法总结: 在CSS布局设计中，元素的...以上就是一些常见的CSS实现文本和div垂直居中的方法。选择哪种方法取决于项目的需求和浏览器兼容性要求。随着CSS新特性的普及，使用Flexbox和Grid布局通常能提供更灵活且简洁的解决方案。

css3 flex实现div内容水平垂直居中的几种方法: 总的来说，CSS3的Flexbox布局提供了一种强大的方法来处理元素的布局和对齐，使得水平垂直居中变得简单而直观。通过熟练掌握这些基本属性，开发者可以构建出更复杂、更适应不同屏幕尺寸的网页布局。

Global site tag (gtag.js) - Google Analytics