What is the best way to vertically and horizontally center an element?

Question

What is the best way to vertically and horizontally center an element?

Is it possible to center an object in the middle of the screen using margin: 0 auto, but how can you center it vertically too? Additionally, is there a way to make the border in h2 surround only the text and not the whole width?

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>

html css

Answer 1

Answer №1

#mainContent 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 2

#mainContent 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 3

Answer №2

Give this a try, it's what you're looking for

To achieve the desired effect, simply add text-align: center; to the CSS rule #section1 h2{. See the code snippet below:

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 4

Give this a try, it's what you're looking for

To achieve the desired effect, simply add text-align: center; to the CSS rule #section1 h2{. See the code snippet below:

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 5

Answer №3

Give this a shot

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 amazing!</h2>
</div>

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

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

Answer 6

Give this a shot

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 amazing!</h2>
</div>

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

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

Answer 7

Answer №4

<div class="snippet" data-lang="js" data-hide="true">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-custom"><code>          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>Stay amazing!</h2>
</div>

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

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

Answer 8

<div class="snippet" data-lang="js" data-hide="true">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-custom"><code>          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>Stay amazing!</h2>
</div>

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

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

Answer 9

Answer №5

<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>            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 fabulous!</h2>
    </div>

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

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

Answer 10

<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>            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 fabulous!</h2>
    </div>

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

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

What is the best way to vertically and horizontally center an element?

Answer №1

Answer №2

Give this a try, it's what you're looking for

Answer №3

Answer №4

Answer №5

Similar questions

The password-protected HTML blog remains hidden until the correct entry is entered into the password box, causing

Encountering an Issue with Incorporating Multiple SCSS files in Jekyll

Can anyone provide guidance on how to create this particular shadow effect using CSS?

Steer your keyboard attention towards the parent element that embodies a list

When using Vue.js, the class binding feature may not function properly if it is referencing another data property that has variants

I need to adjust my navbar in Bootstrap 5 so that one <li> item floats to the left while the remaining items float to the right

How can I retrieve and showcase the size of each file, including images, CSS, and JS, present on a website?

Modify the scrolling functionality to ensure that fixed elements remain visible even on smaller screens

The Bootstrap datepicker functions properly when used in plain HTML, but encounters issues when implemented within the .html()

"Utilize JavaScript to extract data from JSON and dynamically generate a

"Trouble arose when I tried to incorporate additional functions into my JavaScript code; my prompt feature is not

Sliding Toggle: Panel Revealed with Button Slide

Changing CSS module variables through JavaScript programming

"Enhance your audio experience across all browsers with the revolutionary

iOS is not receiving JSON data in the response headers

Centralized and secure masthead

identify when the bottom of a container is reached during scrolling through a window

Display advertisement upon clicking

Open the HTML document and access the file contents

Change the background image when hovering over an element with vanilla JavaScript by utilizing data attributes