OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How do I center this div? [closed]

  • Thread starter Thread starter Tennessee
  • Start date Start date
T

Tennessee

Guest
I'm making a website and I want to center a div horizontally and vertically, however, it won't work.

Here's the relevant HTML and CSS code for reference:


Code:
.loginWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.login {
  width: 300px;
  height: 300px;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login h1 {
    color: #FFF;
}

Code:
<div class="loginWrapper">
  <div class="login">
    <h1>lorem ipsum</h1>
  </div>
</div>

And here's a a photo of what's happening on the website
<p>I'm making a website and I want to center a div horizontally and vertically, however, it won't work.</p>
<p>Here's the relevant HTML and CSS code for reference:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.loginWrapper {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}

.login {
width: 300px;
height: 300px;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
}

.login h1 {
color: #FFF;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="loginWrapper">
<div class="login">
<h1>lorem ipsum</h1>
</div>
</div></code></pre>
</div>
</div>
</p>
<p>And here's a
<a href="https://i.sstatic.net/WF1Tj8wX.png" rel="nofollow noreferrer">a photo of what's happening on the website</a></p>
Continue reading...
 

Latest posts

А
Replies
0
Views
1
Али-Мухаммад Закарьяев
А
M
Replies
0
Views
1
Marcos R. Guevara
M
M
Replies
0
Views
1
Marcos R. Guevara
M
Top