如何将div完美地置于容器中心

Question

HTML代码为：

<div class="header">

        <div class="div1">
            Division 1
        </div>

        <div class="div2">
            Division 2
        </div>

        <div class="div3">
            Division 3
        </div>

</div>

相应的CSS代码是：

.header{
    border: 2px solid red;
    text-align: center;
    height: 100px;
    overflow: hidden;
}

.div1{
    height: 150px;
    width: 150px;
    background-color: green;
    float:left;
}   

.div2{
    height: 150px;
    width: 100px;
    margin: 0 auto;
    background-color: orange;
    display: inline-block;
}

.div3{
    height: 150px;
    width: 50px;
    background-color: blue;
    float: right;   
}

它从屏幕中心开始div2，但是朝着正确的方向前进。我想让div2的中心位于屏幕中央。

此处显示当前输出： output

Answer 1

制作标题position:relative和div2 position:absolute left and right to 0看到这个小提琴。 https://jsfiddle.net/xwzyoqn3/1/

.header{
    border: 2px solid red;
    text-align: center;
    height: 100px;
    overflow: hidden;
    width:100%;
    position:relative;
}

.div1{
    height: 150px;
    width: 150px;
    background-color: green;
    float:left;
}   

.div2{
    height: 150px;
    width: 100px;
    margin: 0 auto;
    background-color: orange;
    display: inline-block;
    position:absolute;
    left:0;
    right:0;
}

Answer 2

使用display：flex

检查以下代码段

.header {
  display: flex;
  border: 2px solid red;
  text-align: center;
  height: 100px;
  overflow: hidden;
  justify-content: space-between;
}
.div1 {
  height: 150px;
  width: 150px;
  background-color: green;
}
.div2 {
  height: 150px;
  width: 100px;
  background-color: orange;
}
.div3 {
  height: 150px;
  width: 50px;
  background-color: blue;
}

<div class="header">

  <div class="div1">
    Division 1
  </div>

  <div class="div2">
    Division 2
  </div>

  <div class="div3">
    Division 3
  </div>

</div>

希望有所帮助

Answer 3

你应该移动.div 3 BEFORE .div2并将.div更改为display：block;

.div2{
height: 150px;
width: 100px;
margin: 0 auto;
background-color: orange;
display: block;
}

<div class="header">
    <div class="div1">
        Division 1
    </div>

    <div class="div3">
        Division 3
    </div>

    <div class="div2">
        Division 2
    </div>
  </div>

Answer 4

垂直对齐的最佳方式：

bar.class.name.split('::').last
#=> "Bar"

最适合水平对齐：

$.ajax({
  dataType: 'json',
  url: $url,
  success: function(data)
  {
    console.log( data );
  }
})

Answer 5

.centerDiv
	{
		width: 60%;
		height:200px;
		margin: 0 auto;
		background-color:#FFA500 ;
	}
	.div1
	{
		width: 33%;
		height:200px;
		background-color:#A52A2A ;
		float:left;
	}
	.div2
	{
		width: 34%;
		height:200px;
		background-color:#FFA500 ;
		float:left;
	}
	.div2
	{
		width: 33%;
		height:200px;
		background-color:#008000 ;
		float:left;
	}

<div class="centerDiv">
		<div class="div1">
		</div>
		<div class="div2">
		</div>
		<div class="div3">
		</div>
	</div>

或

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.container {
    height: 100%;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
.row {
    width: auto;
    border: 1px solid blue;
}
.item {
    background-color: tomato;
    padding: 5px;
    width: 20px;
    height: 20px;
    margin: 10px;
    line-height: 20px;
    color: white;
    font-weight: bold;
    font-size: 2em;
    text-align: center;
}

<div class="container">
    <div class="row"> 
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>
</div>