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>
  
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

    <!--个人信息区域-->        <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>
  
  
1
2
3
4
5
6
7

动态获取宽度

有时候想获取一个动态的宽度，有什么办法？前段时间查看了一下资料，现在记录一下，这个方法也挺适合的可以解决想要的问题

    width: -moz-fit-content;    width: -webkit-fit-content;    width: fit-content;
  
  
1
2
3

水平居中的一些设置

经常在div 实现这些居中的设置效果，这个方法也比较适合。使用margin:0 auto; 的一个容易犯错的地方，如果不写一个固定宽度，那么div就经常显示不到一个水平居中的问题。 
但是通过 width: fit-content; 这样的方法则可以实现一个比较好的居中效果。

  margin:0 auto;  text-align: center;
  
  
1
2

           

再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow