CSS: Конфликт между позицией и выравниванием

Question

Я хотел бы показать заголовок H1 в центре страницы, а также установить его положение как «фиксированное» (так как я не хочу, чтобы он уходил от экрана при прокрутке пользователя)

Я пробовал следующие варианты, но, к сожалению, этого не смог.

Вариант 1:

<div align="center" style="position:fixed;"><h1>Welcome</h1></div> 

Вариант 2:

<h1 text-align="center" style="position:fixed;">Welcome</h1> 

Вариант 3:

<h1 text-align="center" position="fixed">Welcome</h1> 

До сих пор все из перечисленных выше вариантов показывает текст в фиксированном положении, но это не в центре экрана. Но когда я удаляю position: fixed;, текст появляется в центре экрана.

Любые предложения?

Answer 1

Вы можете попробовать это:

<div align="center" style="position:fixed;width:100%"><h1>Welcome</h1></div> 

Дайте width:100% вашему div. Вот Demo

Answer 2

Вы можете определить для вашего DIV left:0; и right:0;

как нравится эта

<div align="center" style="position:fixed;left:0;right:0;"><h1>Welcome</h1></div>

Answer 3

Option 1: <div align="center" style="position:fixed;"><h1>Welcome</h1></div> 

HTML align - deprecated.

Решение:

<div style="position:fixed;width:100%;text-align:center;"><h1>Welcome</h1></div>

<div style="position:fixed;right:0;left:0;text-align:center;"><h1>Welcome</h1></div>

Option 2: <h1 text-align="center" style="position:fixed;">Welcome</h1> 

Там нет атрибута HTML, который называется text-align="center".

<h1 style="position:fixed;width:100%;text-align:center;">Welcome</h1>

<h1 style="position:fixed;left:0;right:0;text-align:center;">Welcome</h1>

Option 3: <h1 text-align="center" position="fixed">Welcome</h1> 

атрибут HTML не имеет text-align="center" и position="fixed".

Вариант 3 решение, как вариант 2 ответы.