Flexbox 中心 垂直和垂直 中心 调整一个元素

.wrapper {边界: 1px 固体 #678596; 最大宽度: 350px; 边界: 30px 自动;}.parentClass { 显示: flex; 定义内容:中心; 平衡元素:中心; 高度: 300px;}.parentClass div { 边界: 5px; 背景: #678596; 宽度: 50px; 线高度: 50px; 文本平衡:中心; 字体大小: 30px; 颜色: #fff;} <h1>Flexbox 中心 垂直和垂直 中心 平衡元素</h1> <h2>j

更新 2022 中央元素 垂直

1、使用 flexbox 垂直集中

要垂直集中一个像(div)这样的元素,需要将显示:flex 和正当内容:中心添加到元素 css 类。

<div class="center">
   <h1>I'm Horizontally center</h1>
</div>

.center{
   display:flex;
   justify-content:center;
}

二、使用边界的水平集中

下面的例子表明如何使用边界和宽度以水平为中心的元素。

.center{
    width:50%;
    margin:0 auto;
}

在上面的代码中,添加了宽度:50%和边缘:0自动,以便元素在左边和右边边之间平等分配可用的空间。

3、使用转型视角

下面的例子表明如何使用位置和转换属性以水平为中心的元素。

.center{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

首先,添加位置:绝对,以便元素从正常文档流出。第二,我们添加左:50%,以便元素向前移动50%向x轴。第三,我们添加转换:translateX(-50%),以便元素向后返回50%并将其调整到中心。

好吧,我找到了一个可能适合所有情况的解决方案,但使用JavaScript:

这里是结构:

<div class="container">
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
</div>

此分類上一篇: JavaScript snippet:

$(document).ready(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

如果你想用它在一个响应性方法,你可以添加以下:

$(window).resize(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

有一个选择,我发现:

每个人都说要使用:

margin: auto 0;

但还有另一个选项. 设置此属性为父母 div. 它在任何时候都完美工作:

text-align: center;

看,孩子去中心。

最后,为您提供CSS:

#outer{
     text-align: center;
     display: block; /* Or inline-block - base on your need */
}

#inner
{
     position: relative;
     margin: 0 auto; /* It is good to be */
}

中心一个Div在一个Div

.outer { 显示: -webkit-flex; 显示: flex; //-webkit-justify-content: center; //justify-content: center; //align-items: center; width: 100%; height: 100px; background-color: lightgrey; }.inner { 背景颜色: cornflowerblue; padding: 2rem; margin: auto; //align-self: center; } <div class="outer"> <div class="inner"

#inter { 边界: 0.05em 固体黑色; } #outer { 边界: 0.05em 固体红色; 宽度:100%; 显示: flex; justify-content: center; } <div id="outer"> <div id="inner"> Foo foo</div> </div>

其他解决方案

您可以将此 CSS 应用到内部 <div>:

#inner {
  width: 50%;
  margin: 0 auto;
}

当然,你不需要设置宽度为50%,任何宽度低于含有<div>的将工作。

如果您正在针对 Internet Explorer 8 (及以后),可能更好地拥有此相反:

#inner {
  display: table;
  margin: 0 auto;
}

它将使内部元素的中心垂直,它工作而不设置特定的宽度。

工作例子在这里: