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

Question

我试图将对象置于屏幕中间。我用过margin：0 auto。我不知道垂直居中！另外如何在h2中创建边框以仅包围文本而不是整个宽度 ？

HTML

＆＃13;

＆＃13;

    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;
    }

＆＃13;

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

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

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

试试这个你想要的

简单地将此text-align: center;添加到#section1 h2{ bellow是snippet run bellow snippet

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>