css - 顺风居中文本(垂直/水平)

Question

我创建了一张小卡片，它的左侧应该有一个数字。我解决了这个问题 - 但有一件小事我直到现在才解决。

这个数字应该水平和垂直居中。

这就是我所做的:https://codepen.io/spqrinc/pen/jOEraJx

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.1.2/tailwind.min.css">
<div class="md:flex lg:w-1/2 p-2">
  <div class="md:flex-1 rounded-sm shadow-lg text-gray-600 bg-white rounded-sm shadow-lg">
    <div class="overflow-hidden w-full flex leading-normal lg:h-full">
      <div class="sm:w-1/3 lg:w-1/4 bg-teal-600 block">
        <div class="text-center text-6xl font-bold text-white">1</div>
      </div>
      <p class="text-gray-600  sm:w-2/3 lg:w-3/4 p-4">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
        sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
        ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
      </p>
    </div>
  </div>
</div>

不幸的是，content-center不适合我。

Answer 1

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.1.2/tailwind.min.css">
<div class="md:flex lg:w-1/2 p-2">
  <div class="md:flex-1 rounded-sm shadow-lg text-gray-600 bg-white rounded-sm shadow-lg">
    <div class="overflow-hidden w-full flex leading-normal lg:h-full">
      <div class="sm:w-1/3 lg:w-1/4 bg-teal-600 flex items-center justify-center">
        <div class="text-center text-6xl font-bold text-white">1</div>
      </div>
      <p class="text-gray-600  sm:w-2/3 lg:w-3/4 p-4">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
        sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
        ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
      </p>
    </div>
  </div>
</div>

重要的部分是 flex items-center justify-center 而不是第四个 div 中的 block。