How to make an element not reduce in width in relation to the webpage-CodePudding

<!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>
</head>
<style>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "poppins";
}
body{
    background-color: rgb(214, 255, 255);
}
.article:nth-child(3){
    background-color: white;
}
.article:nth-child(5){
    background-color: white;

}
.container{
    margin: 0 auto;
    width: fit-content;
}
.article:nth-child(1){
    color: white;
    background-color: purple;
}
.article:nth-child(2){
    background-color: #222;
    color: white;
}
.article:nth-child(4){
    background-color: rgb(0, 2, 37);
    color: white;
}
.article{
    font-weight: 800;
    padding: 20px;
    text-align: center;
    border-radius: 20px;
    width: 45%;
}
</style>
<body>
    <div >
        <div >
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque provident quia quidem fuga natus modi? Similique eum est nemo iure eaque debitis veritatis maiores aliquam porro sequi, harum unde quos?</p>
        </div>
        <div >
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque provident quia quidem fuga natus modi? Similique eum est nemo iure eaque debitis veritatis maiores aliquam porro sequi, harum unde quos?</p>
        </div>
        <div >
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque provident quia quidem fuga natus modi? Similique eum est nemo iure eaque debitis veritatis maiores aliquam porro sequi, harum unde quos?</p>
        </div>
        <div >
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque provident quia quidem fuga natus modi? Similique eum est nemo iure eaque debitis veritatis maiores aliquam porro sequi, harum unde quos?</p>
        </div>
        <div >
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque provident quia quidem fuga natus modi? Similique eum est nemo iure eaque debitis veritatis maiores aliquam porro sequi, harum unde quos?</p>
        </div>
    </div>
</body>
</html>

So as you can see, I'm trying to make these divs align in the center of the webpage without the use flex or grid and not reduce in width in relation to when its viewed in different screen size and also without media queries, In other how to make this elements centerly aligned on the webpage and be as responsive as possible without the property mentioned

CodePudding user response：

div {
  background: red;
  padding: 15px;
  position: absolute;
  color: white;
  top: 50%;
  left: 50%;
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
} 
enter code here

This will center the element Horizontally and vertically.

CodePudding user response：

From what I understand , you don't even want to use media queries, flex or grid. So, I have a solution, maybe this will help you in anyway. add this CSS code for container

.container {
  width:100vw;
  margin: 0 auto;
  align-items:center;
  position:absolute;
  top:50%;
  left:50%;
   -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

and this for article

.article{
    font-weight: 800;
    padding: 20px;
    text-align: center;
    border-radius: 20px;
    width: 100%;
}

From what you are asking without using media queries, flex or grid , I don't think that is perfectly achievable , still I think it can work the way you want.