在另一个div中垂直居中一个div

在父元素上显示文本对齐中心，在子元素上显示内联块。这将居中所有的东西。我相信这叫做“块浮动”。

<div class="outer">
<div class="inner"> some content </div>
</div><!-- end outer -->


<style>
div.outer{
width: 100%;
text-align: center;
}
div.inner{
display: inline-block;
text-align: left
}
</style>

这也是一个很好的选择浮动，祝你好运!

< a href = " http://zerosixthree。/ /a> . /" rel="noreferrer">Vertical - Align - Anything -with-just-3-lines-of- CSS /" rel="noreferrer">Vertical - Align - Anything -with-just-3-lines-of- CSS /

超文本标记语言

<div class="parent-of-element">


<div class="element">
<p>Hello</p>
</div>


</div>

简单的

.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}

CSS

.parent-of-element {
position: relative;
height: 500px;
/* or height: 73.61% */
/* or height: 35vh */
/* or height: ANY HEIGHT */
}


.element {
position: absolute;
top: 50%;


-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

根据shouldiprefix，这是你唯一需要的前缀

您还可以使用%作为.parent-of-element的'height'属性的值，只要元素的父元素具有高度或一些扩展其垂直大小的内容。

.center:before {
content: ""; /* Adding Extra Space Above Element */
display: inline-block;
height: 100%;
margin-right: -0.3em;
vertical-align: middle;
}
.center_element {
display:inline-block;
float:none;
vertical-align:middle;
white-space:normal;
text-align:left;
}

试着像这样对齐内部元素:

top: 0;
bottom: 0;
margin: auto;
display: table;

当然还有:

position: absolute;

这对我很有用。可以定义外部div的宽度和高度。

代码如下:

.outer {
position: relative;
text-align: center;
width: 100%;
height: 150px; // Any height is allowed, also in %.
background: gray;
}


.outer > div:first-child {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: red;
}

<div class="outer">
<div class="inner">
Put here your text or div content!
</div>
</div>

你可以在CSS中使用flex将div垂直和水平居中;

#outerDiv{
width: 500px;
height: 500px;
position:relative;
border:1px solid #000;
margin:0 auto;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;


}


#innerDiv{
width: 284px;
height: 290px;
border:1px solid #eee;


}

第二个是这样的;

    #outerDiv{
width: 500px;
height: 500px;
position:relative;
border:1px solid #000;
}


#innerDiv{
max-width: 300px;
height: 200px;
background-color: blue;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
border:1px solid #000;
border-radius:4px;
}

以及生成的HTML:

    <div id="outerDiv">
<div id="innerDiv"></div>
</div>

小提琴Link <# EYZ0 >

试试这个

   #outerDiv{
width: 500px;
height: 500px;
position:relative;
border:1px solid red;
}


#innerDiv{
width: 284px;
height: 290px;
position:absolute;
top: 0px;
left:0px;
right:0px;
bottom:0px;
margin:auto;
border:1px solid green;
}

如果你在看完上面给出的精彩答案后仍然不明白。

这里有两个简单的例子，告诉你如何实现它。

使用display: table-cell

.wrapper {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 400px;
height: 300px;
border: 1px solid #555;
}


.container {
display: inline-block;
text-align: left;
padding: 20px;
border: 1px solid #cd0000;
}

<div class="wrapper">
<div class="container">
Center align a div using "<strong>display: table-cell</strong>"
</div>
</div>

使用flex-box (display: flex)

.wrapper {
display: flex;
justify-content: center;
width: 400px;
height: 300px;
border: 1px solid #555;
}


.container {
align-self: center;
padding: 20px;
border: 1px solid #cd0000;
}

<div class="wrapper">
<div class="container">
Centering a div using "<strong>display: flex</strong>"
</div>
</div>

注意:在使用上述实现之前，请检查display: table-cell和flex的浏览器兼容性。

# EYZ0 # EYZ1

.div1{
height: 300px;
background: red;
width: 100%;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}
.div2{
background: green;
height: 100px;
width: 100%;
}


<div class="div1">
<div class="div2">
sdfd
</div>
</div>

https://jsfiddle.net/Mangesh1556/btn1mozd/4/

当你的height没有设置(自动);你可以给内部div一些填充(顶部和底部)，使它垂直居中:

<div>
<div style="padding-top:20px;padding-bottom:20px">
<!--content-->
</div>
</div>

这将工作的方式回到IE6!

<!DOCTYPE html>在IE6上也是必需的! [将强制IE6默认严格模式以及].

(当然，方框着色仅供演示使用)

#outer{
width: 180px;
height: 180px;
margin: auto;
text-align: center;
}
#inner{
text-align: center;
vertical-align: middle;
width: 100px;
height: 100px;
display: inline-block;
padding: .3em;
}
#center{
height: 100%; width:0px;
vertical-align: middle;
display: inline-block;
}
div {background: rgba(0,110,255,.7)}

<DIV id=outer>
<div id=center>
</div><!--Don't break this line!--><div id=inner>
The inner DIV
</div>
</DIV>

你可以通过添加下面提到的css样式来做到这一点。大多数浏览器都支持这一点。您可以检查here浏览器支持。愿一切都好！如有任何疑问，请评论

#outerDiv {
width: 500px;
height: 500px;
position:relative;
background:grey;
display:flex;
justify-content:center;
align-items:center;
}


#innerDiv {
background:cyan;
width: 284px;
height: 290px;
}

<div id="outerDiv">
<div id="innerDiv">
Inner Div
</div>
</div>

在另一个div中垂直居中一个div

#outerDiv{
width: 500px;
height: 500px;
position:relative;
  

background-color: lightgrey;
}


#innerDiv{
width: 284px;
height: 290px;
  

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); /* IE 9 */
-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
  

background-color: grey;
}

<div id="outerDiv">
<div id="innerDiv"></div>
</div>

使居中:使垂直和水平对齐:

#parentDiv{
display:table;
text-align:center;
}


#child {
display:table-cell;
vertical-align:middle;
}

垂直居中的div项目在另一个div

只需将容器设置为display:table，然后将内部项目设置为display:table-cell。在容器上设置height，然后在内部项目上设置vertical-align:middle。早在IE9时代，它就具有广泛的兼容性。

请注意，垂直对齐将取决于父容器的高度。

.cn
{
display:table;
height:80px;
background-color:#555;
}


.inner
{
display:table-cell;
vertical-align:middle;
color:#FFF;
padding-left:10px;
padding-right:10px;
}

<div class="cn">
<div class="inner">Item 1</div>
<div class="inner">Item 2</div>
</div>

我想展示另一种跨浏览器的方法，可以使用CSS3 calc()解决这个问题。

当子div的位置绝对相对于父div时，我们可以使用calc()函数来控制子div的margin-top属性。

使用calc()的主要优点是父元素的高度可以随时改变，并且子div将始终对齐到中间。

margin-top计算是动态的(通过css而不是通过脚本，它是一个非常大的优势)。

看看这个现场演示

<!DOCTYPE html>
<html>
<head>
<style>
#parent{
background-color:blue;
width: 500px;
height: 500px;
position:relative;
}
#child{
background-color:red;
width: 284px;
height: 250px;
position:absolute;
/* the middle of the parent(50%) minus half of the child (125px) will always
center vertically the child inside the parent */
margin-top: -moz-calc(50% - 125px);
/* WebKit */
margin-top: -webkit-calc(50% - 125px);
/* Opera */
margin-top: -o-calc(50% - 125px);
/* Standard */
margin-top: calc(50% - 125px);
}
</style>
</head>
<body>
<div id="parent">
<div id="child">
</div>
</div>
</body>
</html>

输出: