方案一
位置 屬性名 值 意義
方案二
位置
屬性名
值
意義
相容性
子div
<a href="http://www.runoob.com/cssref/pr-class-display.html">display</a>
table
table的表現上和block非常像，但是它和block元素有差別，『寬度也是跟着内容走』
IE8以上
<a href="http://www.runoob.com/cssref/pr-margin.html">margin</a>
0 auto
上下為0 左右為『自動』
方案三---絕對定位+transform
父div
<a href="http://www.runoob.com/cssref/pr-class-position.html">position</a>
relative
相對定位，将父元素設定為一個參照物
absolute
絕對定位，寬度由内容決定
<a href="http://www.runoob.com/cssref/pr-pos-left.html">left</a>
50%
把子div的左邊緣設定在其父元素左邊緣向右 父元素50%寬度的位置：
<a href="http://www.runoob.com/cssref/css3-pr-transform.html">transform</a>
css3新增，IE老版本不支援
缺點： transform 屬性為css3新增，IE老版本(IE6,7,8)中無法使用。
方案四
flex
父元素的display 為 flex時，子元素自然就成為了flex item。flex 預設情況下，寬度是auto的。
<a href="http://www.runoob.com/cssref/css3-pr-justify-content.html">justify-content</a>
center
項目位于容器的中心。
或者
或者，在子元素中設定 margin 屬性：上下為0 ，左右自動（居中）
效果相同
缺點： flex 在IE低版本中不支援。
開始做，堅持做，重複做