我怎么能实现css垂直和水平居中？

Question

我如何将孩子垂直居中于父母？

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

我怎么能意识到它？

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

Answer 1

css vertical-align:middle中的

用于将孩子垂直居中对齐。但是，此属性仅适用于具有display:inline-block或display:table-cell的元素。因此，尝试应用display属性，您将获得元素的垂直中心位置。

Answer 2

我喜欢垂直和水平对齐盒子的技术需要两个容器。

外部容器

• 应该有display: table;

内部容器

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

内容框

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

这项技术的优雅之处在于您可以将内容添加到内容框中，而无需担心其高度或宽度！

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

演示

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

另见this Fiddle！

Answer 3

您可以通过以下方式处理：     保证金：0自动;

Answer 4

试试此代码

body {
  margin: 0;
  padding:0;
}

.div1 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.div2 {
  width: 50vw;
  height: 50vh;
  background: #999;
}