Flexbox:水平和垂直中心

如何在容器中使用flexbox水平和垂直地居中div。在下面的例子中，我想要每个数字都在对方下面(在行中)，这是水平居中。

.flex-container { padding: 0; margin: 0; list-style: none; display: flex; align-items: center; justify-content: center; } row { width: 100%; } .flex-item { background: tomato; padding: 5px; width: 200px; height: 150px; margin: 10px; line-height: 150px; color: white; font-weight: bold; font-size: 3em; text-align: center; } <div class="flex-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>

http://codepen.io/anon/pen/zLxBo

当前回答

你可以利用

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

在父组件上

2019-09-25 05:20:54

其他回答

Add

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

到你想居中的容器元素。文档: justify-content和对齐项目。

2017-04-12 13:06:27

使用CSS +

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

看这里

2015-12-01 17:58:55

希望这能有所帮助。

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
row {
  width: 100%;
}
.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

2020-03-22 15:37:59

结果:

CODE

HTML:

<div class="flex-container">
  <div class="rows">

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

CSS:

html, body {
  height: 100%;  
}

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

.rows {
  display: flex;
  flex-direction: column;
}

其中flex-container div用于垂直和水平居中你的行div，和行div用于分组你的“项目”，并在一个基于列的顺序。

2019-12-06 13:35:30

边际:自动工作“完美”与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>

2017-04-20 18:52:47

Flexbox:水平和垂直中心

推荐文章

最新文章

标签