Como colocar uma div do lado da outra sem float

RodrigoCesar · Junho 3, 2019

Boa noite,

estou tendo a seguinte questão, estou precisando posicionar elementos (divs) um do lado do outro de forma que fiquem responsivos então os mesmos desçam em fiquem um em baixo do outro em telas menores. Ou seja, quando em tela grande de pc um do lado do outro, em telas menores móveis um em cima do outro. O recomendado pra isso seria usar float, porém preciso que ao ficar um em cima do outro os elementos fiquem centralizados na tela e a propriedade float sempre joga os elementos pra direita ou pra esquerda, não deixa ficar centralizado. Preciso então posicionar um do lado do outro sem uso de float ou encontrar outra solução, segue código abaixo. Desde já agradeço.

<!DOCTYPE html> 
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="estilo.css" />


</head>
<body>


	<div class="blocos_caracteres">
		<div class="blocos_caracteres_content_1">
			<p>oi</p>
		</div>
		<div class="blocos_caracteres_content_2">
			<p>oi</p>
		</div>
		<div class="blocos_caracteres_content_3">
			<p>oi</p>
		</div>
		<div class="blocos_caracteres_content_4">
			<p>oi</p>
		</div>
	</div>



</body>
</html>

/****reset****/
html {
margin:0;
padding:0;
border:0;
height:100%;
}
body {
margin:0;
padding:0;
border:0;
height:100%;
}
ul, ol, li {list-style:none;}
/****reset****/



.blocos_caracteres {width:94%; margin: 0 auto;  }

.blocos_caracteres_content_1 {width:25%; height:300px; min-width: 250px; background-color: yellow; float: left; }

.blocos_caracteres_content_2 {width:25% ; height:300px; min-width: 250px; background-color: green; float: left; }

.blocos_caracteres_content_3 {width:25% ; height:300px; min-width: 250px; background-color: blue; float: left;}

.blocos_caracteres_content_4 {width:25% ; height:300px; min-width: 250px; background-color: red; float: left;}