html（十一）html与css实现元素居中与定位

1.内联元素居中
水平居中：text-align：center；

竖直居中：line-height：最近父元素（块）的高；
         padding ；
         或者padding和line-height；

2 .块元素的五种居中方法

    <div class="div1">页面内div元素的水平居中
        <div class='div2'>div元素内元素的居中:用css3实现</div>
        <div class="div3">div元素内的元素居中:用css3的新样式实现(宽高不固定也可以)</div>
        <div class="div4">div元素内的元素居中:用绝对定位和负margin实现</div>
        <div class="div5">绝对定位+margin实现</div>
   </div>

.div1{
        background-color:rgb(39, 8, 8);
        /* margin: auto; 如果没有下面的两句就可以实现水平居中但是由于要与第二种方法配合必须加上*/
        height:550px;
        width:550px;
        position: relative;
        display: table-cell;
        vertical-align:middle;
        text-align:center;
    }
    .div2{
        background-color:rgb(99, 13, 13);
        height:400px;
        width:400px; 
        margin: auto;
        text-align:center;
    }
    .div3{
        background-color:rgb(182, 51, 51);
        color:black;
        height:250px;
        width:250px;
        left:50%;
        top:50%;
        transform: translate(-50%,-50%);
        position: absolute; 
        text-align:center;
    }
    .div4{
        background-color:rgb(202, 110, 110);
        width:120px;
        height:120px;
        position:absolute;
        left:50%;
        top:50%;
        margin-left:-60px;
        margin-top:-60px;
        text-align: center;
        line-height:40px;
    }
    .div5{
        background-color:rgb(196, 167, 167);
        width:50px;
        height:50px;
        position:absolute;
        left:0;
        right:0;
        bottom:0;
        top:0;
        margin:auto; 
        font-size:1px;
        text-align:center;
   }

定位
1.所有的元素默认都是流式定位：position:static；
2.绝对定位：position:abosulte；
3.相对定位（相对于上一个非默认定位的父元素定位）：position:relative；
4.继承父元素的定位方式：position:inherit；
5.绝对定位：position:fixed；
！z-index：99；可以使元素在三维空间内从大到小（从上到下）开始重叠，
观者只能从顶上往下看去