-1

"Hello Tamanna" will always be in the center after zooming in or out enter image description here

mubasshir00
  • 307
  • 3
  • 9
  • 2
    Does this answer your question? [How to vertically center a "div" element for all browsers using CSS?](https://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-element-for-all-browsers-using-css) – Pedro Uzcátegui Jan 23 '21 at 05:05

4 Answers4

0

.main {
display: flex;
justify-content: center;
align-items: center;
height:100vh;
}
<div class="main">
  <span>Hello Tamanna</span>
<div>

Or

.main {
  height:100vh;
}
.main strong{
position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div class="main">
      <strong>Hello Tamanna</strong>
    <div>
akhtarvahid
  • 9,445
  • 2
  • 26
  • 29
0

.main {
display: flex;
justify-content: center;
align-items: center;
height:100vh;
}
<div class="main">
Hello Tamanna
</div>
Tim
  • 9
  • 3
-1

Using these CSS techniques we can place a text in the center position.

*{
    box-sizing: border-box;
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    min-height: 100vh;
}
mubasshir00
  • 307
  • 3
  • 9
-1

<style type="text/css">     
  html {
        height: 100%;
  }
  body {
        min-height: 100%;
  }
  #main_div{
        top: 0;
        bottom: 0;
        position: absolute;
        margin: 0 auto;
        width: 100%;
        display: flex;
        align-items: center;
  }
  #h3_text{
        margin: 0 auto;
  }
</style>
<div id="main_div">
       <h3 id="h3_text">Hello</h3>
    </div>
Malika
  • 7
  • 5