元素水平垂直居中的方案

元素水平垂直居中的方案

• 1.絕對定位和margin
  position：absolute;left:0;right:0;bottom:0;top:0;margin:auto;
• 2.塊元素

    height=line-height //高度等於行高	垂直居中
    text-algin:center	//水平居中
  

• 3.flex-box佈局

    display:flex;
    justify-conetnt:center;//水平居中
    algin-item:center; //垂直居中
  

• 4.絕對定位和transform
  • 父元素絕對定位
  • 子元素 position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)
• 5.grid佈局

  display:grid;
  //內容區垂直水平居中
  // place-content:center	//縮寫
  justify-conetnt:center;//內容區水平居中
  algin-conetnt:center; //內容區垂直居中
  //元素垂直水平居中
   //palce-item:center; //縮寫
  // justify-item:center;//元素水平居中
  // algin-item:center; //元素垂直居中