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

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

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

当前回答

您可以使用 CSS Flexbox 来实现这一点. 您只需要将 3 个属性应用到母元素,以便一切都工作。

#outer {
  display: flex;
  align-content: center;
  justify-content: center;
}

看看下面的代码会让你更好地了解属性。

了解更多关于CSS Flexbox的信息

#outer { 显示: flex; align 标题: 中心; justify 内容: 中心; 边界: 1px 固体 #ddd; 宽度: 100%; 高度: 200px; } <div id="outer"> <div id="inner"> Foo foo</div> </div>

2016-11-01 13:41:38

其他回答

试试这:

<div id="a">
    <div id="b"></div>
</div>

CSS:

#a{
   border: 1px solid red;
   height: 120px;
   width: 400px
}

#b{
   border: 1px solid blue;
   height: 90px;
   width: 300px;
   position: relative;
   margin-left: auto;
   margin-right: auto;
}

2014-08-13 13:20:22

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

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

2017-09-23 17:48:56

而不是多种包装和/或自动边缘,这个简单的解决方案对我来说工作:

<div style="top: 50%; left: 50%;
    height: 100px; width: 100px;
    margin-top: -50px; margin-left: -50px;
    background: url('lib/loading.gif') no-repeat center #fff;
    text-align: center;
    position: fixed; z-index: 9002;">Loading...</div>

它将Div放在视图(垂直和水平)的中心,尺寸和调整尺寸,中心背景图像(垂直和水平),中心文本(水平),并保持Div在视图和内容的顶部。

2015-01-15 14:31:34

专注于水平

演示:

以垂直和垂直为中心

在我的经验中,将盒子垂直和水平中心的最佳方式是使用额外的容器,并应用以下属性:

外部容器:

内部容器:

内容盒子:

.outer 容器 { 显示: 表; 宽度: 100%; 高度: 120px; 背景: #CCC; }. 内部容器 { 显示: 表细胞; 垂直平面: 中间; 文本平面: 中间; }.centered 内容 { 显示: inline-block; 背景: #FFF; padding: 20px; 边界: 1px 固体 #000; } <div class="outer-container"> <div class="inter-container"> <div class="centered-content">

再看这个Fiddle吧!

2016-02-19 16:57:54

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

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

推荐文章

最新文章

标签