今天調整居中一直遇到一些問題，針對css的特性多少會發現一些無解的狀態，實在寫得太慢了，很多時候都需要靠練習去體驗。查看了一些資料，發現下面使用絕對和相對位置配合還是挺湊效。

今天想實現兩張圖片，其中一張需要居中效果，改用下面的css樣式可以顯示想要的效果。外層position :relative, 內層 position: absolute; 改成這樣。

 <style>
        .out {
            width: 100%;
            height: 50%;
            position: relative;
            text-align
 
: center;
        }
        .in {
            width: 100px;
            height: 100px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -50px;
            margin-top: -50px;
        }
    </style>

    <!--個人資訊區域-->
        <div class="out"
 
>
            <div class="in">
                <img src=" __ROOT__/Public/img/0002.jpg" width="100%" height="100%"/>
            </div>
             <img src=" __ROOT__/Public/img/nianhui.jpg" width="100%" height="100%"/>
        </div>

動態獲取寬度

有時候想獲取一個動態的寬度，有什麼辦法？前段時間查看了一下資料，現在記錄一下，這個方法也挺適合的可以解決想要的問題

    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;

水平居中的一些設定

經常在div 實現這些居中的設定效果，這個方法也比較適合。使用margin:0 auto; 的一個容易犯錯的地方，如果不寫一個固定寬度，那麼div就經常顯示不到一個水平居中的問題。
但是通過 width: fit-content; 這樣的方法則可以實現一個比較好的居中效果。

  margin:0 auto;
  text-align: center;