顺风居中的文字 (vertically/horizontally)

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。

顺风居中的文字 (vertically/horizontally)

Center text (vertically/horizontally) with tailwind

css

tailwind-css