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

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

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

当前回答

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

其他回答

最簡單的方式之一是使用顯示器: flex. 外部 div 只需要顯示器 flex, 內部需要範圍: 0 auto 以使其以水平為中心。

要垂直集中,只需在另一个Div中集中一个Div,请查看下面的.inter 类评论。

.wrapper { 显示: flex; /* 添加我们想要的任何高度和宽度 */ 高度: 300px; 宽度: 300px; /* 只是这样你可以看到它是中心 */ 背景: peachpuff; }.inner { /* 中心水平 */ 边界: 0 自动; /* 中心垂直 * /* 边界: 0 自动; * /* 中心 * / * 边界: 0 自动; * / } <div class="wrapper"> <div class="inner"> 我是 ho

2018-09-07 21:56:14

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

2015-05-15 10:26:00

读完所有答案后,我看不到我最喜欢的答案,这就是你如何将一个元素集中在另一个元素中。

jsfiddle - http://jsfiddle.net/josephtveter/w3sksu1w/

<p>Horz Center</p>
<div class="outterDiv">
    <div class="innerDiv horzCenter"></div>
</div>
<p>Vert Center</p>
<div class="outterDiv">
    <div class="innerDiv vertCenter"></div>
</div>
<p>True Center</p>
<div class="outterDiv">
    <div class="innerDiv trueCenter"></div>
</div>
.vertCenter
{
    position: absolute;
    top:50%;
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.horzCenter
{
    position: absolute;
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.trueCenter
{
    position: absolute;
    left: 50%;
    top: 50%;
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.outterDiv
{
    position: relative;
    background-color: blue;
    width: 10rem;
    height: 10rem;
    margin: 2rem;
}
.innerDiv
{
    background-color: red;
    width: 5rem;
    height: 5rem;
}

2016-06-09 20:21:25

它也可以用绝对定位来垂直和垂直集中,如下:

#outer{
    position: relative;
}

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

2017-05-10 02:56:52

首先:你需要给第二 Div 一个宽度:

例如:

HTML

<div id="outter">
    <div id="inner"Centered content">
    </div
</div>

CSS:

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

请注意,如果你不给它一个宽度,它将采取整个线的宽度。

2014-09-27 08:29:03

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

推荐文章

最新文章

标签