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

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

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

当前回答

#inner {
    width: 50%;
    margin: 0 auto;
}

2015-05-15 10:26:00

其他回答

试试这:

<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

<html>

*{ margin: 0; padding: 0; } #outer{ 背景: 红色; 宽度: 100%; 高度: 100vh; 显示: flex; /*center 垂直*/ 正当内容: 中心; flex 方向: 列; /*center 垂直*/ 匹配元素: 中心; } #inner{ 宽度: 80%; 高度: 40px; 背景: g

2022-02-16 08:28:54

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

2018-01-25 06:45:04

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

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

2017-09-23 17:48:56

这是一个垂直中心的最佳例子 <div>

<!DOCTYPE html> <html> <head> </head> <body> <div id="outer"> <div id="inner">Foo foo</div> </div> </body>

2019-11-23 10:54:34

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

推荐文章

最新文章

标签