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

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

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

当前回答

此分類上一篇: <div id="outer" style="width:100%"> <div id="inner">Foo foo</div> </div>

2018-01-25 06:45:04

其他回答

CSS3:

您可以在父母容器上使用以下风格平等地分配儿童元素:

display: flex;
justify-content: space-between;  // <-- space-between or space-around

关于正当内容的不同价值观的好示范。

此分類上一篇

CanIUse:浏览器兼容性

尝试一下:

#containerdiv {显示: flex; justify-content: space-between; } #containerdiv > div {背景颜色:蓝色;宽度: 50px;颜色:白色;文本平行:中心; } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div id="containerdiv"> <div>88</div> <div>77</

2017-03-11 14:14:33

注意:我分享这个代码,因为谷歌带我到这个 Stack Overflow 解决方案,除了隐藏的元素没有任何宽度,直到它们显示后才可以重新测量/集中。

2011-06-23 21:42:53

试着和周围玩

margin: 0 auto;

如果你也想集中你的文本,试着使用:

text-align: center;

2013-11-05 15:21:21

与网

一个非常简单和现代的方式是使用显示器:网:

div { 边界: 1px dotted 灰色; } #outer { 显示: 网; 地点标题: 中心; 高度: 50px; /* 不需要 */ } <!DOCTYPE html> <html> <head> </head> <body> <div id="outer"> <div> Foo foo</div> </div> </body> </html>

2020-07-27 21:10:48

我已经看到很多和很多答案,他们都是过时的,谷歌已经实施了一个解决这个常见的问题,它将对象的中心字面上在中间,无论发生什么,是的,它是响应性的。

.HTML

...
<div class="parent">
   <form> ... </form>
   <div> ... </div>
</div>

饰 CSS

.parent {
   display: grid;
   place-items: center;
}

2021-04-16 21:55:15

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

推荐文章

最新文章

标签