利用calc( 50vw - 25vmin )置中

by wllai2001

HTML

<div>
  置中
</div>

CSS

div{
  /*margin:auto;*/
  
  /*當你有可變動的寬*/
  width:50vmin;
  height:50vmin;
  
   /*也有可變動的邊長，就可讓指定的目標置中*/
  margin-left:calc( 50vw - 25vmin );
  
  
  border:1px solid #333;
  text-align:center;
  line-height:50vmin;
  }