怎样才能垂直集中一个元素?

我如何用CSS垂直集中一个 <div> 在另一个 <div> 中?

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

当前回答

最好的方法是使用CSS3。

旧盒子模型(重定向)

显示:盒子和其属性盒子包、盒子平行、盒子东方、盒子方向等已被 flexbox 替换,虽然它们可能仍然工作,但不建议在生产中使用。

#outer { 宽度: 100%; /* Firefox */ 显示: -moz-box; -moz-box-pack:中心; -moz-box-align:中心; /* Safari 和 Chrome */ 显示: -webkit-box; -webkit-box-pack:中心; -webkit-box-align:中心; /* W3C */ 显示: 盒子; 盒子包:中心; 盒子包:中心; } #inner { 宽度: 50%; } <div id="outer"> <div id="inner">Foo foo</div> </div>

根据您的可用性,您也可以使用盒子方向、盒子灵活、盒子方向特性。

现代盒子模型与Flexbox

#outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

阅读更多关于专注于儿童元素

链接2 链接3 链接4

这解释了为什么盒子模型是最好的方法:

為什麼W3C盒子模型被認為更好?

2012-08-30 12:05:25

其他回答

要在中间调整一个 div 中间的 div -

.outer{ 宽度: 300px; /* 例如 */ 高度: 300px; /* 例如 */ 背景: 红色; }.inner{ 位置: 相对; 顶部: 50%; 左: 50%; 转换: 翻译(-50%, -50%); 宽度: 200px; 高度: 200px; 背景: 黄色; } <body> <div class='outer'> <div class='inner'></div> </div> </body>

这将使中间的内部迪夫均匀,垂直和水平。

2020-06-22 13:35:31

以垂直为中心的DIV:

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  display: inline-block;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

2019-05-23 12:50:57

这对我工作:

#inner {
    position: absolute;
    margin: 0 auto;
    left: 0;
    width: 7%;
    right: 0;
}

在此代码中,您将确定元素的宽度。

2018-11-25 08:40:10

你可以以不同的方式做到这一点. 请参见下面的例子:

1. First Method
#outer {
   text-align: center;
   width: 100%;
}
#inner {
   display: inline-block;
}


2. Second method
#outer {
  position: relative;
  overflow: hidden;
}
.centered {
   position: absolute;
   left: 50%;
}

2017-12-02 05:28:36

我们可以使用下一个CSS的类,允许中心垂直和垂直对其父母的任何元素:

.centerElement{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

2017-09-23 17:48:56

怎样才能垂直集中一个元素?

推荐文章

最新文章

标签