html - 容器内文字垂直居中 - 浮动元素垂直居中




将div垂直居中在另一个div内 (16)

另一种方法是使用变换翻译

外部分部必须将其position设置为relativefixed position ,内部分部必须将其position设置为absolutetopleft 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 (至少4个带-webkit-前缀)
  • Firefox 31.0 (使用-moz-前缀的最小值为3.6,不包含前缀的16)
  • Chrome 36 (使用-webkit-前缀的最少11个,不含前缀的36个)
  • IE 11,10(最少9个带-ms-前缀,10个不带前缀)
  • 更多浏览器,我可以使用吗?

我想要将一个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宽度和高度的innerDiv 。如果宽度/高度改变,我将不得不修改margin-topmargin-left是否有任何通用的解决方案,我可以无论内部区域大小如何,都可以使用内部区域中心?

我发现使用margin:auto可以将innerDiv横向排列到middle.But垂直排列中间是什么?


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


Fiddle Link < http://jsfiddle.net/dGHFV/2515/ >

尝试这个

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

tl;dr

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

此解决方案在IE6和7中不起作用。
你的是更安全的方式。
但是,既然你用CSS3和HTML5标记了你的问题,我以为你不介意使用现代解决方案。

经典的解决方案(表格布局)

这是我最初的答案。 它仍然正常工作,并且是最广泛支持的解决方案。 表格布局会影响您的渲染性能,所以我建议您使用更现代的解决方案之一。

这是一个例子

经测试:

  • 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;
}

现代解决方案(转型)

由于转换得到了很好的支持,现在有一种更简单的方法来实现它。

CSS

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

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

Demo

♥我最喜欢的现代解决方案(flexbox)

我开始越来越多地使用flexbox, 现在也得到了很好的支持,这是目前最简单的方法。

CSS

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

Demo

更多的例子和可能性: 比较一个页面上的所有方法


在这里输入图像描述 100%它的工作原理

.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/


自从一年以来,我一直在使用以下解决方案,它也适用于IE 7和8。

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

与其将自己束缚在难以编写和难以维护的CSS中(这还需要仔细的跨浏览器验证!),我发现放弃CSS并使用简单而非常简单的HTML 1.0会好得多:

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

这完成了原始海报想要的所有内容,并且强大且可维护。


你可以用一个简单的javascript(jQuery)块来做到这一点。

CSS

#outerDiv{
    height:100%;
}

Javascript

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

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

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

使用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>

使用柔性盒(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的浏览器兼容性。


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

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

Reference


尝试像这样对齐内部元素:

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

而且当然:

position: absolute;

当你的height没有设置(自动); 你可以给内部div一些填充(顶部和底部),使其垂直居中:

<div>
    <div style="padding-top:20px;padding-bottom:20px">
    <!--content-->
    </div>
</div>

我个人更喜欢使用隐藏的伪元素跨越外容器的整个高度,并将其与其他内容垂直对齐的技巧。 Chris Coyier在这项技术上有一篇不错的文章。 http://css-tricks.com/centering-in-the-unknown/这个的巨大优势是可扩展性。 您不必知道内容的高度或担心内容的增长/缩小。 这个解决方案缩放:)。

这里有你需要的所有CSS和一个工作示例的小提琴。 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;
}

我知道这个问题是在一年前创建的...无论如何,感谢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;
} 

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

代码如下:

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


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

你可以通过简单地添加上面提到的CSS样式来完成。 祝一切顺利。 为查询写评论





css3