This is a very basic question and good to be the first CSS problem on BFE.dev. Suppose you have an HTML structure as below <div class="outer"> <div cl…

2. truncate text in one line(with ellipsis)

1. center an element vertically

<pre class="shiki github-dark shaku"><code>.outer { width: 100%; height: 100%; background-color: #efefef; /* your code here */ /* Solution 1 */ /* display: flex; justify-content: center; align-items: center; */ /* display: grid; */ position: relative;}.inner { width: 100px; height: 100px; background-color: #f44336; /* your code here */ /* Solution 2 (apply position: relative to the parent element) */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* Solution 3 (apply display: grid to the parent element) */ /* justify-self: center; align-self: center; */}</code></pre>