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

当前回答

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

对齐项目:中心;-->

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

justify-content:中心;-->

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

祝你好运。

2014-06-14 12:02:49

其他回答

您可以在flex-container中添加flex-direction:column

.flex-container {
  flex-direction: column;
}

将display:inline-block添加到flex-item

.flex-item {
 display: inline-block;
}

因为您添加的宽度和高度对该元素没有影响，因为它具有内联显示。尝试添加display:inline-block或display:block。了解更多关于宽度和高度的知识。

也添加到row类(你被给予row{}而不是作为样式)

.row{
  width:100%;
  margin:0 auto;
  text-align:center;
}

工作演示:

.flex-container { padding: 0; margin: 0; list-style: none; display: flex; align-items: center; justify-content:center; flex-direction:column; } .row{ width:100%; margin:0 auto; text-align:center; } .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; display: inline-block; } <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>

工作演示栏:

.flex-container { padding: 0; margin: 0; width: 100%; list-style: none; display: flex; align-items: 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; display: inline-block; } <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>

2020-09-19 10:22:16

如果你需要在链接中居中显示文本，这可以做到:

div { 显示:flex; 宽度:200 px; 身高:80 px; 背景颜色:黄色; ｝一个{ 显示:flex; 对齐项目:中心; justify-content:中心; text-align:中心;/*只对多行重要*/ 填充:0 20px; 背景颜色:银色; 边框:2px纯蓝色; ｝ < div > 文本< a href = " # " > < / > <a href="#">文本与两行</a> < / div >

2017-03-04 17:47:13

希望这能有所帮助。

.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

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

用这个:

   html, body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
   }

像这样的HTML标记:

   <html>
      <body>
        <main>
          <button> abc </button>
          <p> something </p>
        </main>
      </body>
    </html>

Html, body { 显示:flex; 对齐项目:中心; justify-content:中心; 高度:100%; ｝ < html > 身体< > <大> <button> ABC </button> <p> something </p> 主> < / 身体< / > < / html >

2021-08-26 17:46:21

Flexbox:水平和垂直中心

推荐文章

最新文章

标签