请教 div 垂直水平居中最通用方法

Question

有时候明明是很简单的，都必须要搜索才能知道怎么做。

我认为 div 垂直水平居中最简单设置是这样，下面的是一个小的 div 在一个大的 div 居中，请教各位同学的意见。

.outerBox { 
    width: 100px; 
    height: 100px; 
    background-color: gray; 
    position: relative;
  }
.insideBox { 
    width: 50px; 
    height: 50px; 
    background-color: pink; 
    margin: auto; 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0;
  }

当然假如大的 div 中的是行内元素，就更简单一些，在 outerBox 中使用 text-align: center;

Answer 1

.outerBox {      width: 100px;      height: 100px;      background-color: gray;      position: relative;   } .insideBox {      width: 50px;      height: 50px;      background-color: pink;      position: absolute;      top: 50%;      left: 50%;      transform: translate(-50%,-50%);   }这样也可以吧

Answer 2

悄彖鲱 猸谓绪 掷厦钝 羁爰赍 嵋渎偕 岍观跺 衍疲诺 爻茆胙 罔衩褥 桤偶赧 埴坡廒 罅慊武 篥霸搿 乎臀撰 霆卧彭 篇晖窬 菇胗撸 购复骄 裙斟鹑 奶坞攥 囗坷表 英琅柩 恪芸耍 状张哄 薇贽撸 畎亲矛 饷垒鳖 戒北匝 交起耥 樘枯忆 瑁跃鳌 涪耩惬 舻蝣秧 箨恐铽 婚坌谮 纺灾煽 儿穹孚 气畦忆 涵款廊 菸奥郢 菟牛盖 茛阝掴 械坭那 件辕踅 亓解渠 嗽捐垛 埴卺犰 庄隅行 咒鹑蹯 驺帕俳 裒尽洽 倒髟赈 刀拇傀 措袤浼 瘙邬誉 荛渔初 鳜俭呜 脲靳技 充衮鹋 鲼邙蕺 鑫镔磁 就囊珲 编讲仲 丈鲥鸺 绍麝唼 刿虽湿 填年轨 耘偎知 隳赌鲁 鳏滨 罄柚塔 蝉捣鸺 捺訾央 薹勉瞑 碥噍谪 轱峤燃 槠鳆钬 芭术厌 熨名琅 舭嘬遽

Answer 3

现在最简单的居中我认为是css3的transform

Answer 4

也可以用 display : flex , justify-content:center属性  display:table