首页 文章

将div垂直居中于另一个div内

提问于
浏览 次
470

我想将一个div添加到另一个div中 .

<div id="outerDiv">
    <div id="innerDiv">
    </div>
</div>

这是我目前使用的CSS .

#outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
    }

    #innerDiv{
        width: 284px;
        height: 290px;
        position:absolute;
        top: 50%;
        left:50%;
        margin-top: -147px;
        margin-left: -144px;
    }

正如您所看到的，我现在使用的方法取决于 innerDiv 的宽度和高度值 . 如果宽度/高度发生变化，我将不得不修改 margin-top 和 margin-left 值 . 是否有任何通用的解决方案，我可以使用它来居中 innerDiv 总是与它的大小无关？

我发现使用 margin:auto 可以将innerDiv水平对齐到中间 . 但是垂直中间的那个呢？

html css html5 css3

23 回答

  • -6

    对于没有指定它的高度值的innerdiv，没有纯css解决方案使其垂直居中 . 一个javascript解决方案可以获取innerdiv的offsetHeight，然后计算style.marginTop .

    回复于
  • 3

    tl;dr

    垂直对齐中间作品，但您必须在父元素上使用 table-cell 并在子元素上使用 inline-block .

    这个解决方案在IE6和7中不起作用 .
    你的是更安全的方式 .
    但是，由于您使用CSS3和HTML5标记了您的问题，我认为您不介意使用现代解决方案 .

    The classic solution (table layout)

    这是我原来的答案 . 它仍然可以正常工作，是最广泛支持的解决方案 . 表布局将impact your rendering performance所以我建议你使用一个更现代的解决方案 .

    Here is an example

    Tested in:

    • FF3.5

    • FF4

    • Safari 5

    • Chrome 11

    • IE9

    HTML

    <div class="cn"><div class="inner">your content</div></div>

    CSS

    .cn {
  display: table-cell;
  width: 500px;
  height: 500px;
  vertical-align: middle;
  text-align: center;
}

.inner {
  display: inline-block;
  width: 200px; height: 200px;
}

    Modern solution (transform)

    由于变换是fairly well supported now，因此有一种更简单的方法 .

    CSS

    .cn {
  position: relative;
  width: 500px;
  height: 500px;
}

.inner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 200px;
  height: 200px;
}

    Demo

    ♥ my favourite modern solution (flexbox)

    我开始越来越多地使用flexbox its also well supported now这是迄今为止最简单的方法 .

    CSS

    .cn {
  display: flex;
  justify-content: center;
  align-items: center; 
}

    Demo

    更多示例和可能性：Compare all the methods on one pages

    回复于
  • 2

    实现这种水平和垂直居中的另一种方法是：

    .Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

    （Reference）

    回复于
  • 649

    另一种方法是使用Transform Translate

    外部Div必须将 position 设置为 relative 或 fixed ，并且内部Div必须将其 position 设置为 absolute ， top 和 left 至 50% 并应用 transform: translate(-50%, -50%) .

    div.cn {
    position: relative;
    width: 200px;
    height: 200px;
    background: gray;
    text-align: center;
}

div.inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    -webkit-transform: translate(-50%, -50%);  
    transform: translate(-50%, -50%);   
    background: red;
  
}

    <div class="cn">
    <div class="inner">
        test
    </div>
</div>

    测试中：

    • Opera 24.0 （最低12.1）

    • Safari 5.1.7 （带-webkit-前缀的最小值为4）

    • Firefox 31.0 （最小3.6使用-moz-前缀，16不带前缀）

    • Chrome 36 （最少11个带-webkit-前缀，36个没有前缀）

    • IE 11, 10 （最少9个带-ms-前缀，10个没有前缀）

    • More browsers, Can I Use?

    回复于
  • 1

    Vertical Align Anything with just 3 lines of CSS

    HTML

    <div class="parent-of-element">

    <div class="element">
        <p>Hello</p>
    </div>

</div>

    简单

    .element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

    CSS

    .parent-of-element {
   position: relative;
   height: 500px;
   /* or height: 73.61% */
   /* or height: 35vh */
   /* or height: ANY HEIGHT */
}

.element {
  position: absolute;
  top: 50%;

  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

    根据shouldiprefix，这是您需要的唯一前缀

    您也可以使用％作为.parent-of-element的'height'属性的值，只要element的父元素具有高度或某些内容可以扩展其垂直大小 .

    回复于
  • 16

    而不是把自己绑在一个难以编写和难以维护的CSS的结（这也需要仔细的跨浏览器验证！）我发现放弃CSS并使用非常简单的HTML 1.0更好：

    <table id="outerDiv" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td valign="middle" id="innerDiv">
        </td>
    </tr>
</table>

    这可以完成原始海报所需的一切，并且功能强大且易于维护 .

    回复于
  • 5

    你可以用一个简单的javascript（jQuery）块来做到这一点 .

    CSS ：

    #outerDiv{
    height:100%;
}

    Javascript ：

    <script type="text/javascript">
    $(document).ready(function () {
        $("#innerDiv").css('top', ($(window).height() - $("#content").height()) / 2);
    });
</script>
    回复于
  • 2

    尝试对齐内部元素，如下所示：

    top: 0;
bottom: 0;
margin: auto;
display: table;

    而且当然：

    position: absolute;
    回复于
  • 3

    我个人更喜欢使用隐藏的伪元素来跨越外部容器的整个高度，并将其与其他内容垂直对齐 . 克里斯科伊尔有一篇关于这项技术的好文章 . http://css-tricks.com/centering-in-the-unknown/这样做的巨大优势是可扩展性 . 您不必知道内容的高度或担心内容的增长/缩小 . 这个解决方案缩放:) .

    这里's a fiddle with all the CSS you' ll需要和一个工作实例 . http://jsfiddle.net/m5sLze0d/

    .center:before {
    content: ""; /* Adding Extra Space Above Element */
    display: inline-block;
    height: 100%;
    margin-right: -0.3em;
    vertical-align: middle;
}
.center_element {
    display:inline-block;
    float:none;
    vertical-align:middle;
    white-space:normal;
    text-align:left;
}
    回复于
  • 106
    #outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
        background:grey;
        display:flex;
        justify-content:center;
        align-items:center;
    }

    #innerDiv{
    background:cyan;
        width: 284px;
        height: 290px;

        
    }

    <div id="outerDiv">
<div id="innerDiv">Inner Div
</div>
</div>

    you can do it by simply adding css style mentioned above. All the best. for query write comment

    回复于
  • 2

    未设置 height 时（自动）;你可以给内部div一些填充（顶部和底部）使其垂直居中：

    <div>
    <div style="padding-top:20px;padding-bottom:20px">
    <!--content-->
    </div>
</div>
    回复于
  • 1

    将div项目垂直居中于另一个div中

    只需将容器设置为 display:table ，然后将内部项设置为 display:table-cell . 在容器上设置 height ，然后在内部项目上设置 vertical-align:middle . 就IE9的时代而言，它具有广泛的兼容性 .

    请注意，垂直对齐将取决于父容器的高度 .

    .cn
{
display:table;
height:80px;
background-color:#555;
}

.inner
{
display:table-cell;
vertical-align:middle;
color:#FFF;
padding-left:10px;
padding-right:10px;
}

    <div class="cn">
  <div class="inner">Item 1</div>
  <div class="inner">Item 2</div>
</div>
    回复于
  • 42

    I have been using the following solution since over a year, it works with IE 7 and 8 as well.

    <style>
.outer {
    font-size: 0;
    width: 400px;
    height: 400px;
    background: orange;
    text-align: center;
    display: inline-block;
}

.outer .emptyDiv {
    height: 100%;
    background: orange;
    visibility: collapse;
}

.outer .inner {
    padding: 10px;
    background: red;
    font: bold 12px Arial;
}

.verticalCenter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
</style>

<div class="outer">
    <div class="emptyDiv verticalCenter"></div>
    <div class="inner verticalCenter">
        <p>Line 1</p>
        <p>Line 2</p>
    </div>
</div>
    回复于
  • 38

    这对我有用 . 可以定义外部div的宽度和高度 .

    Here the code:

    .outer {
  position: relative;
  text-align: center;
  width: 100%;
  height: 150px; // Any height is allowed, also in %.
  background: gray;
}

.outer > div:first-child {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: red;
}

    <div class="outer">
  <div class="inner">
    Put here your text or div content!
  </div>
</div>
    回复于
  • 2

    小提琴链接<http://jsfiddle.net/dGHFV/2515/>

    Try this

    #outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
        border:1px solid red;
    }

    #innerDiv{
        width: 284px;
        height: 290px;
        position:absolute;
        top: 0px;
        left:0px;
        right:0px;
        bottom:0px;
        margin:auto;
        border:1px solid green;
    }
    回复于
  • 0

    如果您在阅读上面给出的奇妙答案后仍然不明白 .

    以下是两个如何实现它的简单示例 .

    使用display：table-cell

    .wrapper {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 400px;
  height: 300px;
  border: 1px solid #555;
}

.container {
  display: inline-block;
  text-align: left;
  padding: 20px;
  border: 1px solid #cd0000;
}

    <div class="wrapper">
  <div class="container">
    Center align a div using "<strong>display: table-cell</strong>"
  </div>
</div>

    使用flex-box（display：flex）

    .wrapper {
  display: flex;
  justify-content: center;
  width: 400px;
  height: 300px;
  border: 1px solid #555;
}

.container {
  align-self: center;
  padding: 20px;
  border: 1px solid #cd0000;
}

    <div class="wrapper">
    <div class="container">
        Centering a div using "<strong>display: flex</strong>"
    </div>
</div>

    注意：在使用上述实现之前，请检查display：table-cell和flex的浏览器兼容性 .

    回复于
  • 1

    enter image description here 100% it works

    .div1{
  height: 300px;
  background: red;
  width: 100%;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
}
.div2{
  background: green;
  height: 100px;
  width: 100%;
}

    <div class="div1">
      <div class="div2">
      sdfd
      </div>
    </div>

    https://jsfiddle.net/Mangesh1556/btn1mozd/4/

    回复于
  • 1

    您可以使用flex在CSS中垂直和水平居中div;

    #outerDiv{
width: 500px;
    height: 500px;
    position:relative;
    border:1px solid #000;
    margin:0 auto;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;

    }

#innerDiv{
    width: 284px;
    height: 290px;
    border:1px solid #eee;

}

    第二个是如下;

    #outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
        border:1px solid #000;
        }

        #innerDiv{
        max-width: 300px;
        height: 200px;
        background-color: blue;
        position:absolute; 
        left:0;
        right:0;
        top:0;
        bottom:0;
        margin:auto;
        border:1px solid #000;
        border-radius:4px;
    }

    结果HTML：

    <div id="outerDiv">
        <div id="innerDiv"></div>
    </div>
    回复于
  • 2

    This will work way back to IE6!

    IE6也需要 <!DOCTYPE html> ！ [将强制IE6默认严格模式] .

    （当然，盒子着色仅用于演示目的）

    #outer{
        width: 205px;
        height: 205px;
        margin: auto; 
        text-align: center;
    }
    #inner{
        text-align: left;
        vertical-align: middle;
        width: 120px;
        height: 120px;
        display: inline-block;
   
    }
    #center{
        height: 100%; width:0px;
        vertical-align: middle;
        display: inline-block;
    }
    div {background: rgba(0,128,255,.6)}

    <div id=outer>
    <div id=center></div><div id=inner> The inner DIV
    </div>
</div>
    回复于
  • 4

    父元素上的文本对齐中心，在子元素上显示内联块 . 这将集中所有任何东西 . 我相信它的称呼是“块浮动” .

    <div class="outer">
 <div class="inner"> some content </div>
</div><!-- end outer -->

<style>
div.outer{
 width: 100%;
 text-align: center;
}
div.inner{
 display: inline-block;
 text-align: left
}
</style>

    这也是浮动的好选择，祝你好运！

    回复于
  • 0

    将div垂直居中于另一个div内

    #outerDiv{
  width: 500px;
  height: 500px;
  position:relative;
  
  background-color: lightgrey;  
}

#innerDiv{
  width: 284px;
  height: 290px;
  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */	
  
  background-color: grey;
}

    <div id="outerDiv">
  <div id="innerDiv"></div>
</div>
    回复于
  • 0

    要垂直和水平对齐：

    #parentDiv{
    display:table;
    text-align:center;
}

#child {
     display:table-cell;
     vertical-align:middle;
}
    回复于
  • 1

    我知道这个问题是在一年前创建的...无论如何，感谢CSS3你可以很容易地在div中垂直对齐div（例如那里http://jsfiddle.net/mcSfe/98/）

    <div style="width: 100px; height: 100px">
<div>
Go to Hell!
</div>
</div>

div
{
display:-moz-box;
-moz-box-align:center;
}
    回复于

相关问题