如何将 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

使用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 2

让headerposition:relative和div2position:absoluteleft and right to 0看到这个fiddle。 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 3

您应该将 .div 3 移动到 .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

垂直对齐的最佳方式：

.center {
    height: 200px;
    position: relative;
    border: 3px solid green;
}

.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

最适合水平对齐：

<div id="wrapper" style="text-align: center">    
    <div id="yourdiv" style="display: inline-block;">You text</div>
</div>

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>

如何将 div 在容器中完美居中

How to perfectly center a div in a container

html

css

center