CSSå±ä¸ä¹ { left:50%; top:50%; transform:translate(-50%,-50%); }

left:50%; top:50%; transform:translate(-50%,-50%);

left:50%; top:50%; transform:translate(-50%,-50%);

ä¹å¯ä»¥åæ: left:50%; top:50%; translate: -50% -50%;

left:50%; top:50%; translate: -50% -50%;

ç¨ translate çå¿é¡»æ¯åçº§åç´ , æèabsolute,fixed æä¼çæ
æ¯å¦ translate å¨ relative+inline æ¶ä¸ä¼èµ·ä½ç¨
left å top å¨ position:relative,absolute,fixed æä¼çæ

æä»¥positionä¸è½æ¯static ; displayä¸è½æ¯inline,

relative+inline æ¶, leftåtopèµ·ä½ç¨, translateä¸èµ·ä½ç¨
relative+block æ¶, relativeä½¿å¾leftåtopèµ·æ , blockä½¿å¾translateèµ·æ

æ¹æ³1: ä¸ç¨è®¾ç½®ç¶åç´ , è¢«å±ä¸åç´ position:relative, å¿é¡»æ¯ååç´ [ block | inline-block | flex | inline-flex | grid | inline-grid | table | inline-table | â¦çåçº§åç´ ] , ä¸è½æ¯ `inline`

.è¢«å±ä¸åç´ {position:relative; display:block; left:50%; top:50%; transform:translate(-50%,-50%);}

.è¢«å±ä¸åç´ {position:relative; display:inline-block; left:50%; top:50%; transform:translate(-50%,-50%);}

.è¢«å±ä¸åç´ {position:relative; display:grid; left:50%; top:50%; transform:translate(-50%,-50%);}

.è¢«å±ä¸åç´ {position:relative; display:inline-grid; left:50%; top:50%; transform:translate(-50%,-50%);}

.è¢«å±ä¸åç´ {position:relative; display:flex; left:50%; top:50%; transform:translate(-50%,-50%);}

.è¢«å±ä¸åç´ {position:relative; display:inline-flex; left:50%; top:50%; transform:translate(-50%,-50%);}

.è¢«å±ä¸åç´ {position:relative; display:table; left:50%; top:50%; transform:translate(-50%,-50%);}

.è¢«å±ä¸åç´ {position:relative; display:inline-table; left:50%; top:50%; transform:translate(-50%,-50%);}

æ¹æ³2: ç¶åç´ è®¾ç½®position:< relative | absolute | fixed> , è¢«å±ä¸åç´ position:absoluteæfixed, ä¸è½æ¯relative , å¯ä»¥ä¸ç¨è®¾ç½®display

.ç¶åç´ {position:relative;}
.è¢«å±ä¸åç´ {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}

.ç¶åç´ {position:absolute;}
.è¢«å±ä¸åç´ {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}

.ç¶åç´ {position:fixed;}
.è¢«å±ä¸åç´ {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}

.ç¶åç´ {position:relative;}
.è¢«å±ä¸åç´ {position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);}

.ç¶åç´ {position:absolute;}
.è¢«å±ä¸åç´ {position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);}

.ç¶åç´ {position:fixed;}
.è¢«å±ä¸åç´ {position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);}

`transform:translate(-50%,-50%)` å¯ä»¥åæ `translate -50% -50%`

.è¢«å±ä¸åç´ {position:relative; display:block; left:50%; top:50%; translate -50% -50%;}

.ç¶åç´ {position:relative;}
.è¢«å±ä¸åç´ {position:absolute; left:50%; top:50%; translate -50% -50%;}

ä¾å

<div id="B" style="width: 800px; display: grid; grid: auto / 10fr 10fr">
  <div
    class="å±ä¸å®¹å¨"
    style="border: 1px solid black; width: 100%; height: 200px"
  >
    <span
      class="å±ä¸åç´ "
      style="
        position: relative;
        left: 50%;
        top: 50%;
        translate: -50% -50%;
        width: 200px;
        height: 100px;
        font-size: 66px;
        border: 1px solid red;
        text-align: center;
      "
      >ä¸å±ä¸
    </span>
  </div>
  <label>ç¶åç´ ::<br />ååç´ :: position:relative;</label>
  <div
    class="å±ä¸å®¹å¨"
    style="
      position: relative;
      border: 1px solid black;
      width: 100%;
      height: 200px;
    "
  >
    <span
      class="å±ä¸åç´ "
      style="
        position: absolute;
        left: 50%;
        top: 50%;
        translate: -50% -50%;
        width: 200px;
        height: 100px;
        font-size: 66px;
        border: 1px solid red;
        text-align: center;
      "
      >å±ä¸
    </span>
  </div>
  <label>ç¶åç´ ::position:relative;<br />ååç´ :: position:absolute;</label>
  <div
    class="å±ä¸å®¹å¨"
    style="border: 1px solid black; width: 100%; height: 200px"
  >
    <span
      class="å±ä¸åç´ "
      style="
        position: relative;
        display: block;
        left: 50%;
        top: 50%;
        translate: -50% -50%;
        width: 200px;
        height: 100px;
        font-size: 66px;
        border: 1px solid red;
        text-align: center;
      "
      >å±ä¸
    </span>
  </div>
  <label>ç¶åç´ ::<br />ååç´ :: position:relative; display:block</label>
  <div
    class="å±ä¸å®¹å¨"
    style="border: 1px solid black; width: 100%; height: 200px"
  >
    <span
      class="å±ä¸åç´ "
      style="
        position: relative;
        display: inline-block;
        left: 50%;
        top: 50%;
        translate: -50% -50%;
        width: 200px;
        height: 100px;
        font-size: 66px;
        border: 1px solid red;
        text-align: center;
      "
      >å±ä¸
    </span>
  </div>
  <label>ç¶åç´ ::<br />ååç´ :: position:relative; display:inline-block</label>
  <div
    class="å±ä¸å®¹å¨"
    style="border: 1px solid black; width: 100%; height: 200px"
  >
    <span
      class="å±ä¸åç´ "
      style="
        position: relative;
        display: flex;
        left: 50%;
        top: 50%;
        translate: -50% -50%;
        width: 200px;
        height: 100px;
        font-size: 66px;
        border: 1px solid red;
        text-align: center;
      "
      >å±ä¸
    </span>
  </div>
  <label>ç¶åç´ ::<br />ååç´ :: position:relative; display:flex</label>
  <div
    class="å±ä¸å®¹å¨"
    style="border: 1px solid black; width: 100%; height: 200px"
  >
    <span
      class="å±ä¸åç´ "
      style="
        position: relative;
        display: inline-flex;
        left: 50%;
        top: 50%;
        translate: -50% -50%;
        width: 200px;
        height: 100px;
        font-size: 66px;
        border: 1px solid red;
        text-align: center;
      "
      >å±ä¸
    </span>
  </div>
  <label>ç¶åç´ ::<br />ååç´ :: position:relative; display:inline-flex</label>
  <div
    class="å±ä¸å®¹å¨"
    style="border: 1px solid black; width: 100%; height: 200px"
  >
    <span
      class="å±ä¸åç´ "
      style="
        position: relative;
        display: grid;
        left: 50%;
        top: 50%;
        translate: -50% -50%;
        width: 200px;
        height: 100px;
        font-size: 66px;
        border: 1px solid red;
        text-align: center;
      "
      >å±ä¸
    </span>
  </div>
  <label>ç¶åç´ ::<br />ååç´ :: position:relative; display:grid</label>
  <div
    class="å±ä¸å®¹å¨"
    style="border: 1px solid black; width: 100%; height: 200px"
  >
    <span
      class="å±ä¸åç´ "
      style="
        position: relative;
        display: inline-grid;
        left: 50%;
        top: 50%;
        translate: -50% -50%;
        width: 200px;
        height: 100px;
        font-size: 66px;
        border: 1px solid red;
        text-align: center;
      "
      >å±ä¸
    </span>
  </div>
  <label>ç¶åç´ ::<br />ååç´ :: position:relative; display:inline-grid</label>
  <div
    class="å±ä¸å®¹å¨"
    style="border: 1px solid black; width: 100%; height: 200px"
  >
    <span
      class="å±ä¸åç´ "
      style="
        position: relative;
        display: table;
        left: 50%;
        top: 50%;
        translate: -50% -50%;
        width: 200px;
        height: 100px;
        font-size: 66px;
        border: 1px solid red;
        text-align: center;
      "
      >å±ä¸
    </span>
  </div>
  <label>ç¶åç´ ::<br />ååç´ :: position:relative; display:table</label>
  <div
    class="å±ä¸å®¹å¨"
    style="border: 1px solid black; width: 100%; height: 200px"
  >
    <span
      class="å±ä¸åç´ "
      style="
        position: relative;
        display: inline-table;
        left: 50%;
        top: 50%;
        translate: -50% -50%;
        width: 200px;
        height: 100px;
        font-size: 66px;
        border: 1px solid red;
        text-align: center;
      "
      >å±ä¸
    </span>
  </div>
  <label>ç¶åç´ ::<br />ååç´ :: position:relative; display:inline-table</label>
</div>

CSSå±ä¸ä¹ { left:50%ï¼ top:50%ï¼ transform:translate(-50%,-50%)ï¼ }

秒客网

CSSå±ä¸ä¹ { left:50%ï¼ top:50%ï¼ transform:translate(-50%,-50%)ï¼ }

CSSå±ä¸ä¹ { left:50%; top:50%; transform:translate(-50%,-50%); }

æ¹æ³1: ä¸ç¨è®¾ç½®ç¶åç´ , è¢«å±ä¸åç´ position:relative, å¿é¡»æ¯ååç´ [ block | inline-block | flex | inline-flex | grid | inline-grid | table | inline-table | â¦çåçº§åç´ ] , ä¸è½æ¯ `inline`

æ¹æ³2: ç¶åç´ è®¾ç½®position:< relative | absolute | fixed> , è¢«å±ä¸åç´ position:absoluteæfixed, ä¸è½æ¯relative , å¯ä»¥ä¸ç¨è®¾ç½®display

`transform:translate(-50%,-50%)` å¯ä»¥åæ `translate -50% -50%`

ä¾å

相关文章

CSSå± ä¸­ä¹ { left:50%ï¼ top:50%ï¼ transform:translate(-50%,-50%)ï¼ }

CSSå± ä¸­ä¹ { left:50%; top:50%; transform:translate(-50%,-50%); }

æ¹æ³1: ä¸ç¨è®¾ç½®ç¶å ç´ , è¢«å± ä¸­å ç´ position:relative, å¿ é¡»æ¯åå ç´ [ block | inline-block | flex | inline-flex | grid | inline-grid | table | inline-table | â¦ç­åçº§å ç´ ] , ä¸è½æ¯ inline

æ¹æ³2: ç¶å ç´ è®¾ç½®position:< relative | absolute | fixed> , è¢«å± ä¸­å ç´ position:absoluteæfixed, ä¸è½æ¯relative , å¯ä»¥ä¸ç¨è®¾ç½®display

transform:translate(-50%,-50%) å¯ä»¥åæ translate -50% -50%

ä¾å­

相关文章

CSSå±ä¸ä¹ { left:50%ï¼ top:50%ï¼ transform:translate(-50%,-50%)ï¼ }

CSSå±ä¸ä¹ { left:50%; top:50%; transform:translate(-50%,-50%); }

æ¹æ³1: ä¸ç¨è®¾ç½®ç¶åç´ , è¢«å±ä¸åç´ position:relative, å¿é¡»æ¯ååç´ [ block | inline-block | flex | inline-flex | grid | inline-grid | table | inline-table | â¦çåçº§åç´ ] , ä¸è½æ¯ `inline`

æ¹æ³2: ç¶åç´ è®¾ç½®position:< relative | absolute | fixed> , è¢«å±ä¸åç´ position:absoluteæfixed, ä¸è½æ¯relative , å¯ä»¥ä¸ç¨è®¾ç½®display

`transform:translate(-50%,-50%)` å¯ä»¥åæ `translate -50% -50%`

ä¾å