如何將元素垂直和水平居中？

Question

我試圖將對象居中放在屏幕中間。 我已經使用margin：0自動。 我不知道垂直居中！ 另外，如何在h2中使邊框僅包圍文本而不是整個寬度？

html

  body { padding: 0; margin: 0; } #section1 { background: #FEC56B; height: 100vh; } #section2 { background: #51C5D4; height: 100vh; } #section3 { background: #80D4DF; height: 100vh; } #section1 h2 { margin-top: 0px; border: 1px solid black; font-size: 60px; color: white; padding: 0px; } 

 <div id="section1"> <h2>Be awesome!</h2> </div> <div id="section2"> </div> <div id="section3"> </div> 

Answer 1

試試這個你想要的

簡單地添加這個text-align: center; 到#section1 h2{ 波紋管是片段運行波紋管片段

 body{ padding: 0; margin: 0; } #section1{ background: #FEC56B; height: 100vh; } #section2{ background: #51C5D4; height:100vh; } #section3{ background: #80D4DF; height:100vh; } #section1 h2{ text-align: center; margin-top: 0px; border: 1px solid black; font-size: 60px; color: white; padding: 0px; } 

 <div id ="section1"> <h2>Be awesome!</h2> </div> <div id ="section2"> </div> <div id ="section3"> </div> 

Answer 2

嘗試這個

 body{ padding: 0; margin: 0; } #section1{ background: #FEC56B; height: 100vh; text-align:center; } #section2{ background: #51C5D4; height:100vh; } #section3{ background: #80D4DF; height:100vh; } #section1 h2{ margin-top: 0px; border: 1px solid black; font-size: 60px; color: white; padding: 0px; } 

 <div id ="section1"> <h2>Be awesome!</h2> </div> <div id ="section2"> </div> <div id ="section3"> </div> 

Answer 3

#section1 h2{

  border: 1px solid black;
  font-size: 60px;
  color: white;
  padding: 0px;
    margin: auto;
    position:absolute;
    top:0;
    bottom:0;
    right:0;left:0;height:60px;width:350px;
}

Answer 4

  
 
  
  
  
 
   
 
    
          body{
  padding: 0;
  margin: 0;

}

#section1{
  background: #FEC56B;
  height: 100vh;
}

#section2{
  
  background: #51C5D4;
  height:100vh;
}

#section3{
  background: #80D4DF; 
  height:100vh;
}

#section1 h2 {
    border: 1px solid black;
    color: white;
    font-size: 60px;
    line-height: 100vh;
    margin: 0;
    padding: 0;
    position: relative;
    text-align: center;
    vertical-align: middle;
}
 
    
    <div id ="section1">
        <h2>Be awesome!</h2>
    </div>

<div id ="section2">
</div>

<div id ="section3">
</div>
 
   
 
  

Answer 5

  
 
  
  
  
 
   
 
    
            body{
  padding: 0;
  margin: 0;

}

#section1 {
    background: none repeat scroll 0 0 #fec56b;
    float: left;
    height: 100vh;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
}
#section2{
  
  background: #51C5D4;
  height:100vh;
}

#section3{
  background: #80D4DF; 
  height:100vh;
}


#section1 h2 {
    border: 1px solid black;
    color: white;
    font-size: 60px;
    left: 50%;
    line-height: 100vh;
    margin: -394px 0 0 -157px;
    position: absolute;
    text-align: center;
    top: 50%;
    vertical-align: middle;
}
 
    
    <div id ="section1">
        <h2>Be awesome!</h2>
    </div>

    <div id ="section2">
    </div>

    <div id ="section3">
    </div>