beyyh 2014-11-24 09:06 采纳率: 66.7%
浏览 1810
已采纳

请问怎么让div中的div在垂直方向上居中呢？

比如：下面这段代码，如何让里面的div在垂直方向上面居中呢(不好意思，实在是没有悬赏币了)

.out{ width:500px; height:500px; background:blue; } .inn{ width:200px; height:200px; background:red; }
  • 写回答

3条回答 默认 最新

  • 斯洛文尼亚旅游 2014-11-24 09:11
    关注

    你的inn怎么比out还大。。搞反了吧。。通过margin来定位。absolute定位最好，不需要考虑父容器，只需要依据自身的宽和高度来调整margin

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style>.out{  width:300px; height:300px; background:blue; position:relative} .inn{ width:200px; height:200px;background:red;position:absolute;margin-left:-100px;margin-top:-100px;left:50%;top:50% } </style>
<div class="out"><div class="inn"></div></div>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

  • div框水平垂直居中跟内容垂直居中.html
    2021-03-31 16:09
    div框水平垂直居中跟内容垂直居中
  • 多个子div在父中垂直居中
    2023-10-16 17:56
    i_am_a_div_日积月累_的博客 多个子div在父中水平垂直居中
  • 使用css实现div垂直居中的示例
    2020-09-25 03:58
    在网页设计中，让元素居中是常见的需求，特别是对于`div`这样的块级元素，垂直居中有时会显得较为复杂。本示例将详细解释如何使用CSS来实现`div`元素的垂直居中。 首先，我们要理解CSS布局的基本概念。在网页中，...
  • 如何让span在div中垂直居中？
    2025-04-06 16:03
    王铁柱666的博客 在前端开发中，有多种方法可以让元素在其父元素<div>中垂直居中。
  • CSS在固定宽高的div内实现垂直居中的实例详解
    2020-09-24 22:06
    属性，以确保元素相对于外层div垂直居中。 需要注意的是，为了让这种方法能够跨浏览器工作，特别是一些较旧的IE浏览器，还需要加上zoom: 1和*display: inline;这两个属性。这两个属性是为了触发IE6和IE7浏览器支持...
  • div中内容上下居中小结
    2020-09-25 00:54
    在前端开发中，DIV 中内容上下居中是一个常见的问题。通过对 DIV 中内容上下居中的四种常见处理方式的总结，本文旨在帮助开发者快速解决此类问题。 情形一：DIV 限高，内容长度限一行 在这种情形下，使用 margin: ...
  • 不定宽高的文字在div中垂直居中实现方法
    2020-12-29 18:39
    本人在面试的时候被问到：如何使一段不定宽高的文字垂直居中呢？ 现在来总结一下： 在body中写入结构 <div id=main> <div id=login> djshdk awjdsd sede sfcdf vdj sh dkaw jds dse desf cdf vd jsh dkawjd sds ...
  • Flex布局实现div内部子元素垂直居中的示例
    2021-01-21 11:03
    1、Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状...容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main en
  • CSS教程之div垂直居中的多种方法
    2020-09-24 22:42
    在CSS布局中，垂直居中是一项常见的需求，尤其是在网页设计中。本文主要讲解了如何使用CSS实现div元素以及其中多行文本的垂直居中。首先，我们要明确CSS中的`vertical-align`属性并不能直接用于所有元素，它仅适用于...
  • DIV居中及DIV垂直居中.html
    2019-05-16 16:36
    该html代码是实现DIV居中及DIV垂直居中的实例,包括: div居中, div内文本居中及垂直居中, div嵌套div并居中, div嵌套div并垂直居中.
  • 没有解决我的问题, 去提问