h5学习笔记（4） 居中

https://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/

今天调整居中一直遇到一些问题，针对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;