-2

`

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./slider.css">
    <title>slider</title>
</head>
<body>
    flex
    <script src="./slider.js"></script>
</body>
</html>

`

body {
    background-color: #927df1;
    display: flex;
    align-items: center;
    justify-content: center;
}

i watch in youtube but it's not working align-items: center;

justify-content: center; working align-items: center; not working

why? youtube it's working..... plz help

지수박
  • 1

3 Answers3

-1

The problem could be that you have not specified a flex-direction, which is necessary for align-items and justify-content to work. Try adding this to the body CSS:

flex-direction: column;

Sai Sumanth
  • 34
  • 2
-1

The problem is that you do not have content to apply align-items to. align-items is supposed to work on vertical alignment. what you are looking for is horizontal alignment probably. check the following fiddle to get an idea of what is happening.

body {
    background-color: #927df1;
    display: flex;
        
}
.box{
  width:200px;
  height:200px;
  border: 1px solid blue;
  display:flex;
  align-items:center;
}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./slider.css">
    <title>slider</title>
</head>
<body>
<div class="box">
  flex
</div>
<div class="box">
  flex
</div>
<div class="box">
  flex
</div>
    <script src="./slider.js"></script>
</body>
</html>

Edit: In case you want to use the align-items to center your content vertically, just define flex-direction property to column. Default value is row so it will align according to row height. setting it to column will align your content according to column's width.

Chaitanya Bathia
  • 42
  • 1
  • 10
-1

Your code working properly just a minor mistake. by default width and height is 100%; in this case we just simply define height as 100vh

body {
    background-color: #927df1;
    display: flex;
    align-items: center;
    justify-content: center;
    height:100vh;
}
Creative Corner
  • 1