中心對稱

時間 2019-12-10

標籤中心對稱简体版

原文原文鏈接

CSS3 2D 轉換

div
{
    transform: translate(50px,100px);
    -ms-transform: translate(50px,100px);       /* IE 9 */
    -webkit-transform: translate(50px,100px);   /* Safari and Chrome */
    -o-transform: translate(50px,100px);        /* Opera */    
    -moz-transform: translate(50px,100px);      /* Firefox */
}

做用：值 translate(50px,100px) 把元素從左側移動 50 像素，從頂端移動 100 像素。css

測試代碼

<!DOCTYPE HTML>
<html lang="en">
 <head>
  <title> 中心對稱  </title>
  <meta charset="UTF-8">
 </head>
 <style>
      *{
          padding: 0;
          margin: 0;

      }
      div{
           width: 200px;
           height: 200px;
           background: red;
           position:absolute;
           left: 50%;
           top: 50%;           
           /*translate(x,y) 定義 2D 轉換，沿着 X 和 Y 軸移動元素。*/
           transform: translate(-50%,-50%);/* 2D 轉換*/
           text-align: center;
      }
      div h1{
            line-height: 200px; 
      }
 </style>
 <body>
   <div><h1>中心對稱<h1></div>
 </body>
</html>

效果圖

總結

position:absolute;
left: 50%;
top: 50%;           
/*translate(x,y)    定義 2D 轉換，沿着 X 和 Y 軸移動元素。*/
transform: translate(-50%,-50%);/* 2D 轉換*/

相關標籤/搜索