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 */ display: flex; align-items: center; justify-content: center;}.inner { width: 100px; height: 100px; background-color: #f44336; /* your code here */}</code></pre>