Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

center h1 in the middle of screen [duplicate]

How can I center horizontally and vertically a text? I don't want to use position absolute because I try with it and my other div getting worse. Is there another way to do that ?

div {      height: 400px;      width: 800px;      background: red;  }
<div>      <h1>This is title</h1>  </div>      
like image 215
Dina Avatar asked Jan 03 '16 19:01

Dina


People also ask

How do I center my h1 tag in the middle of the screen?

text-align: center; on the h1 element and it will automatically center align the h1. text-align: center; aligns only the content(text) of the h1 element to the center, not the h1 element itself.

How do you center a form in the middle of the screen?

Use the CSS text-align Property to Center a Form in HTML The text-align property takes the values like left , right , center , justify , etc. We can set the value to center to center the form. For example, apply the text-align property to the form tag in the style attribute, and set the property to center .

How do you align text in the middle of the screen?

To center text in CSS, use the text-align property and define it with the value “center.” Let's start with an easy example. Say you have a text-only web page and want to center all the text. Then you could use the CSS universal selector (*) or the type selector body to target every element on the page.

How do you align h1 vertically center?

Just use padding top and bottom, it will automatically center the content vertically.


1 Answers

you can use display flex it enables a flex context for all its direct children, and with flex direction establishes the main-axis, thus defining the direction flex items are placed in the flex container

div{   height: 400px;   width: 800px;   background: red;   display: flex;   flex-direction: column;   justify-content: center;   text-align: center; } 
like image 106
elreeda Avatar answered Oct 29 '22 00:10

elreeda