1. 大包小 只是水平居中 margin:auto dispaly:table

<style>
  #ex2_container { width:200px; height：300px; background-color:yellow; }
  #ex2_content {  height:100px; width:100px; margin:0px auto; background-color:gray; color:white; display:table; }
</style>
<div id="ex2_container"><div id="ex2_content">Hello World</div></div>

image.png

2 translate(-50%,-50%)

<style>
  #ex3_container { width:200px; height:200px; background-color:yellow; position:relative; }
  #ex3_content {height:100px; width:120px; left:50%; top:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); background-color:gray; color:white; position:absolute; }
</style>
<div id="ex3_container"><div id="ex3_content">Hello World</div></div>

image.png

3. 绝对定位居中

<style>
#ex2_container {
  width: 300px;
  height:200px;
  background-color:yellow;
  position: relative;
/*   text-align:center; */
}
#ex2_content {
  width:100px;
  height:100px;
  background-color:grey;
/* width: 50%;
  height: 50%; */
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0;   right: 0;
}
</style>
<div id="ex2_container">
  <div id="ex2_content">Hello World</div>
</div>

image.png

4. 用于mask 布局

<style>
#ex2_container,#is-Fixed {
  position:fixed;
  background-color:yellow;
  top:0;
  right:0;
  left:0;
  bottom:0;
}
#ex2_container #is-Fixed {
  width: 100px;
  height: 100px;
 */ width: 60%; 
  height: 60%;
  min-width: 400px;
  max-width: 500px;*/
  overflow: auto;
  margin: auto;
  z-index: 999;
  background-color:grey;
}
</style>
<div id="ex2_container">
  <div id="is-Fixed">Hello World</div>
</div>

image.png

参考文献

CSS 居中大全