Home / Questions / 288294
Accepted
Fernando Iam
Asked: 2020-08-27 09:45:04 +0800 CST 2020-08-27 09:45:04 +0800 CST

High numbers in the margin

  • 772

I wanted to know if it is correct to put high numbers for the margin, for example I have this code, what I want is to put a text in the center of the screen, but I can't think of any other way, but I don't know if it is the most correct way Sorry if the question is too simple. But I can't find the information I'm looking for

div{
margin-top: 25%;
text-align:center
}
<!DOCTYPE html>
<html>
<head>

        <link href="https://fonts.googleapis.com/css?family=Lexend+Tera&display=swap" rel="stylesheet">

</head>
 
<body>
	<div>

		<H1>Esto es una prueba</H1>
    </div>
</body>
</html>

html

1 Answers

  1. Best Answer

    To put the div that contains the text in the center of the screen, use flexbox like this

        <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Ejemplo</title>
      <style>
        body{
          margin: 0px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: pink;
          height: 100vh;
        }
      </style>
    </head>
    <body>
    <div>Hola Mundo SO</div>
    </body>
    </html>

    • With the first option you center horizontally
    • With the second option you center vertically

    body is the parent tag that contains the div, so with the indicated properties we tell it that its children, in this case the div, are flexible boxes.

    • 2