CSS Center

垂直水平置中

flex

.outer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.inner {
  /* nothing */
}

即時編輯器

function Demo() {
  return (
    <div className="size-52 bg-white flex flex-row items-center justify-center">
      <div className="size-5 bg-black" />
    </div>
  );
}

render(<Demo />);

結果

grid

.outer {
  display: grid;
  place-items: center;
}

.inner {
  /* nothing */
}

即時編輯器

function Demo() {
  return (
    <div className="size-52 bg-white grid place-items-center">
      <div className="size-5 bg-black" />
    </div>
  );
}

render(<Demo />);

結果

flex + margin

.outer {
  display: flex;
}

.inner {
  margin: auto;
}

即時編輯器

function Demo() {
  return (
    <div className="size-52 bg-white flex">
      <div className="size-5 bg-black m-auto" />
    </div>
  );
}

render(<Demo />);

結果

relative + (absolute + top + left + transform)

.outer {
  display: relative;
}

.inner {
  display: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

即時編輯器

function Demo() {
  return (
    <div className="size-52 bg-white relative">
      <div className="size-5 bg-black absolute top-1/2 left-1/2 -translate-1/2" />
    </div>
  );
}

render(<Demo />);

結果

table + (table-cell + vertaical align + text align) + inline-block

.outer {
  display: table;
}

.middle {
  display: table-cell;
  vertaical-align: center;
  text-align: center;
}

.inner {
  display: inline-block;
}

即時編輯器

function Demo() {
  return (
    <div className="size-52 bg-white table">
      <div className="table-cell align-middle text-center">
        <div className="bg-black inline-block size-5"/>
      </div>
    </div>
  );
}

render(<Demo />);

結果

(line-height + height + text-align) + inline-block

.outer {
  --same-height: 208px;
  line-height: var(--same-height);
  height: var(--same-height);
  text-align: center;
}

.inner {
  display: inline-block;
}

即時編輯器

function Demo() {
  return (
    <div className="size-52 bg-white leading-52 h-52 text-center">
      <div className="inline-block size-5 bg-black"/>
    </div>
  );
}

render(<Demo />);

結果

垂直水平置中​

垂直水平置中