我怎样才能使孩子在父母中垂直居中?

并且,孩子和父母的宽度和高度是固定的,但未知。

我怎么能意识到呢?

<div class="parent">
   <div class="child"></div>
</div>

最佳答案

我偏爱的将框垂直和水平居中的技术需要两个容器。



外面的容器


应该有display: table;


内部容器


应该有display: table-cell;
应该有vertical-align: middle;
应该有text-align: center;


内容框


应该有display: inline-block;
应该将水平文本对齐方式重新调整为例如。 text-align: left;text-align: right;,除非您希望文本居中


这种技术的优雅之处在于,您可以将内容添加到内容框中,而不必担心其高度或宽度!

只需将您的内容添加到内容框中。

演示版



body {
    margin : 0;
}

.outer-container {
    position : absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding : 20px;
    border : 1px solid #000;
}

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        <p>You can put anything here</p>
        <p>Yes, really anything!</p>
     </div>
   </div>
</div>





另请参见this Fiddle

关于css - 如何实现CSS垂直和水平居中?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37097732/

10-10 18:33
查看更多