Javascript-форум - Перемещение блока div

Javascript-форум (https://javascript.ru/forum/)

- (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)

- - Перемещение блока div (https://javascript.ru/forum/xhtml-html-css/85118-peremeshhenie-bloka-div.html)

Перемещение блока div

https://skr.sh/sJKAkySVLS8?a
Вот я сделал макет сайт
Но как сделать так, что бы вот 1 и 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">
<title>Document</title>
<link rel="stylesheet" href="style3.css">
</head>
<body>
<div class="nav">

<h1>FLOOPandDROOD</h1>
<a href="htm2.html" > Главная</a>
<a href="" class="active"> Купить</a>
<a href=""> Выбор в слепую</a>
<a href="htm3.html"> Коробки удачи</a>
<a href=""> О нас</a>
<a href="htm.html" class="exit" id="ex">Выйти</a>
</div>

<div id="containers">

<div class="containers">1</div>
<div class="containers">2</div>

</div>

<script src="javasc3.js"></script>
</body>
</html>

CSS
.containers {
background-color: rgb(88, 86, 90);
width: 120px;
height: 120px;
float: left;
padding: 100px;
margin: 50px;
color: aliceblue;
position:relative;

}

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Цитата:

Сообщение от deniscikasov@gmail.com

как сделать так, что бы вот 1 и 2 див находились по центру?

так?

<!DOCTYPE HTML>
<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">
    <title>Document</title>
    <style type="text/css">
        #containers {
            display: flex;
            justify-content: space-around;
        }

        .containers {
            background-color: rgb(88, 86, 90);
            width: 120px;
            height: 120px;
            padding: 100px;
            color: aliceblue;
            position: relative;

        }
    </style>
</head>

<body>
    <div class="nav">
        <h1>FLOOPandDROOD</h1>
        <a href="htm2.html"> Главная</a>
        <a href="" class="active"> Купить</a>
        <a href=""> Выбор в слепую</a>
        <a href="htm3.html"> Коробки удачи</a>
        <a href=""> О нас</a>
        <a href="htm.html" class="exit" id="ex">Выйти</a>
    </div>
    <div id="containers">
        <div class="containers">1</div>
        <div class="containers">2</div>
    </div>
</body>

</html>

Цитата:

Сообщение от deniscikasov@gmail.com

Написал

смотри сообщение #2 и #5

Я не мог придумать лучше объяснения - чем это : https://skr.sh/sJKjDxwzaLY?a

deniscikasov@gmail.com,
смотрите, копируйте к себе и проверяйте пост #5 снова.

Всё так, спасибо