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

div垂直居中的几种办法

阅读更多
以前看到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>
分享到:
评论
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`,可以使`&lt;div&gt;`在父容器中水平居中。例如: `...

    垂直居中.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水平垂直居中

    ### 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