Flexbox：水平和垂直居中

10 回答

• -7

  我想你想要的东西如下 .

  html, body {
      height: 100%;
  }
  body {
      margin: 0;
  }
  .flex-container {
      height: 100%;
      padding: 0;
      margin: 0;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  .row {
      width: auto;
      border: 1px solid blue;
  }
  .flex-item {
      background-color: tomato;
      padding: 5px;
      width: 20px;
      height: 20px;
      margin: 10px;
      line-height: 20px;
      color: white;
      font-weight: bold;
      font-size: 2em;
      text-align: center;
  }
  

  <div class="flex-container">
      <div class="row"> 
          <div class="flex-item">1</div>
          <div class="flex-item">2</div>
          <div class="flex-item">3</div>
          <div class="flex-item">4</div>
      </div>
  </div>
  

  请参阅演示：http://jsfiddle.net/audetwebdesign/tFscL/

  如果希望高度和顶部/底部填充正常工作，则 .flex-item 元素应为块级别（ div 而不是 span ） .

  此外，在 .row 上，将宽度设置为 auto 而不是 100% .

  你的 .flex-container 属性没问题 .

  如果希望 .row 在视口中垂直居中，请为 html 和 body 指定100％高度，并将 body 边距归零 .

  请注意 .flex-container 需要一个高度来查看垂直对齐效果，否则，容器会计算封闭内容所需的最小高度，该高度小于此示例中的视口高度 .

  Footnote:
  flex-flow ， flex-direction ， flex-wrap 属性可以使这种设计更容易实现 . 我认为除非你想在元素周围添加一些样式（背景图像，边框等），否则不需要 .row 容器 .

  一个有用的资源是：http://demo.agektmr.com/flexbox/

  回复于 2024-04-29T09:45:37+08:00
• 21

  如何在Flexbox中垂直和水平居中元素

  以下是两个通用的定心解决方案 .

  一个用于垂直对齐的弹性项目（ flex-direction: column ），另一个用于水平对齐的弹性项目（ flex-direction: row ） .

  在这两种情况下，居中div的高度可以是变量，未定义，未知，等等 . 中心div的高度无关紧要 .

  Here's the HTML for both:

  <div id="container"><!-- flex container -->
  
      <div class="box" id="bluebox"><!-- flex item -->
          <p>DIV #1</p>
      </div>
  
      <div class="box" id="redbox"><!-- flex item -->
          <p>DIV #2</p>
      </div>
  
  </div>
  

  ---

  CSS （不包括装饰风格）

  当弹性项目垂直堆叠时：

  #container {
      display: flex;           /* establish flex container */
      flex-direction: column;  /* make main axis vertical */
      justify-content: center; /* center items vertically, in this case */
      align-items: center;     /* center items horizontally, in this case */
      height: 300px;
  }
  
  .box {
      width: 300px;
      margin: 5px;
      text-align: center;     /* will center text in <p>, which is not a flex item */
  }
  

  

  DEMO

  ---

  当flex项目水平堆叠时：

  从上面的代码调整 flex-direction 规则 .

  #container {
      display: flex;
      flex-direction: row;     /* make main axis horizontal (default setting) */
      justify-content: center; /* center items horizontally, in this case */
      align-items: center;     /* center items vertically, in this case */
      height: 300px;
  }
  

  

  DEMO

  ---

  居中弹性项目的内容

  flex formatting context的范围仅限于父子关系 . 子项之外的Flex容器的后代不参与flex布局，并将忽略flex属性 . 从本质上讲，flex属性在子级之外是不可继承的 .

  因此，您始终需要将 display: flex 或 display: inline-flex 应用于父元素，以便将flex属性应用于子元素 .

  为了垂直和/或水平居中Flex项目中包含的文本或其他内容，将项目设为（嵌套）Flex容器，并重复居中规则 .

  .box {
      display: flex;
      justify-content: center;
      align-items: center;        /* for single line flex container */
      align-content: center;      /* for multi-line flex container */
  }
  

  更多细节：How to vertically align text inside a flexbox?

  或者，您可以将 margin: auto 应用于Flex项的content元素 .

  p { margin: auto; }
  

  在这里了解flex auto 页边距：Methods for Aligning Flex Items（参见方框＃56） .

  ---

  居中多行弹性项目

  当flex容器有多条线（由于包装）时， align-content 属性将是跨轴对齐所必需的 .

  从规格：

  8.4 . 打包Flex行：align-content属性当跨轴中有额外的空间时，align-content属性会在flex容器中对齐flex容器的行，类似于justify-content对齐主轴内各个项的方式 . 请注意，此属性对单行Flex容器没有影响 .

  更多细节：How does flex-wrap work with align-self, align-items and align-content?

  ---

  浏览器支持

  所有主流浏览器都支持Flexbox，except IE < 10 . 最近的一些浏览器版本，例如Safari 8和IE10，需要vendor prefixes . 要快速添加前缀，请使用Autoprefixer . this answer中的更多细节 .

  ---

  旧版浏览器的中心解决方案

  对于使用CSS表和定位属性的替代中心解决方案，请参阅以下答案：https://stackoverflow.com/a/31977476/3597276

  回复于 2024-04-29T09:45:37+08:00
• 2

  加

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

  到任何你想要居中的容器元素 . 文档：justify-content和align-items .

  回复于 2024-04-29T09:45:37+08:00
• 25

  不要忘记使用重要的浏览器特定属性：

  align-items：center; - >

  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  

  辩解内容：中心; - >

  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  

  您可以阅读这两个链接以更好地理解flex：http://css-tricks.com/almanac/properties/j/justify-content/和http://ptb2.me/flexbox/

  祝好运 .

  回复于 2024-04-29T09:45:37+08:00
• 3

  1 - 将父div上的CSS设置为 display: flex;

  2 - 将父div上的CSS设置为 flex-direction: column;
  请注意，这将使该div中的所有内容从上到下排列 . 如果父div仅包含子项而不包含任何其他内容，则此方法最有效 .

  3 - 将父div上的CSS设置为 justify-content: center;

  以下是CSS的示例：

  .parentDivClass {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  

  回复于 2024-04-29T09:45:37+08:00
• 181

  margin: auto 与flexbox完美配合 . 它垂直和水平集中 .

  html, body {
    height: 100%;
    max-height: 100%;
  }
  
  .flex-container {
    display: flex;
      
    height: 100%;
    background-color: green;
  }
  
  .container {
    display: flex;
    margin: auto;
  }
  

  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS</title>
  </head>
  <body>
    <div class="flex-container">
      <div class="container">
        <div class="row">
          <span class="flex-item">1</span>
        </div>
        <div class="row">
          <span class="flex-item">2</span>
        </div>
        <div class="row">
          <span class="flex-item">3</span>
        </div>
       <div class="row">
          <span class="flex-item">4</span>
      </div>
    </div>  
  </div>
  </body>
  </html>
  

  回复于 2024-04-29T09:45:37+08:00
• 0

  如果您需要在链接中居中文本，这将有助于：

  div {
    display: flex;
  
    width: 200px;
    height: 80px;
    background-color: yellow;
  }
  
  a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center; /* only important for multiple lines */
  
    padding: 0 20px;
    background-color: silver;
    border: 2px solid blue;
  }
  

  <div>
    <a href="#">text</a>
    <a href="#">text with two lines</a>
  </div>
  

  回复于 2024-04-29T09:45:37+08:00
• 511

  diplay: flex; 为它的容器和 margin:auto; 因为它的项目完美 .

  NOTE: 您必须设置 width 和 height 以查看效果 .

  #container{
    width: 100%; /*width needs to be setup*/
    height: 150px; /*height needs to be setup*/
    display: flex;
  }
  
  .item{
    margin: auto; /*These will make the item in center*/
    background-color: #CCC;
  }
  

  <div id="container">
     <div class="item">CENTER</div>
  </div>
  

  回复于 2024-04-29T09:45:37+08:00
• 0

  display: flex;
  align-items: center;
  justify-content: center;
  

  回复于 2024-04-29T09:45:37+08:00
• 9

  使用CSS+

  <div class="EXTENDER">
    <div class="PADDER-CENTER">
      <div contentEditable="true">Edit this text...</div>
    </div>
  </div>
  

  看看HERE

  回复于 2024-04-29T09:45:37+08:00