How to make a child centered on both axis with the other childs surrounding it?
How to make a child centered on both axis with the other childs surrounding it?
Let's see an example:
.wrapper
width: 100vw;
height: 100vh;
display: flex;
flex-wrap: wrap;
overflow-y: hidden
.you
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
font-size: 300%
.others
margin: 0 10px
<div class="wrapper">
<h1 class="you">you</h1>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
<p class="others">others</p>
</div>
I want to perfectly center the you in the way that it doesn't overlap the others. I always use flexbox, but it looks like that it will not be the solution. I'm thinking about grid, and to calculate the rows and columns manually, but there must be an elegant way to do this. Please let me know if it is.
No, not possible without knowing row heights / element widths.
– Paulie_D
Sep 3 at 16:08
you can do it with grid, each 'others' word can be in a column, and the 'you' can be an merged area.
– B.J. A.A.
Sep 3 at 16:12
1 Answer
1
Using display:grid, you can achieve the effect that you are looking for:
display:grid
<style>
.grid-container
display: grid;
grid-template-columns:repeat(8,1fr) ;
background-color: #2196F3;
padding: 10px;
.others
padding: 20px;
font-size: 12px;
text-align: center;
.you
font-size: 82px;
grid-area: 4 / 3 / 6 / 7;
text-align: center;
</style>
</head>
<body>
<div class="grid-container">
<div class="you">you</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
<div class="others">others</div>
</div>
</body>
grid-area: 4 / 3 / 6 / 7; this line makes the word 'others' wrap around the 'you' word, how? by using the space in columns and rows that if the word 'others' were there.
Thanks for contributing an answer to Stack Overflow!
But avoid …
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
But avoid …
To learn more, see our tips on writing great answers.
Required, but never shown
Required, but never shown
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
if it is possible, could you share a screenshot of the desired final results?
– Matt
Sep 3 at 15:25