前端--html

1. CSS-水平居中、垂直居中、水平垂直居中

1.1 行内元素水平居中
行内元素指 文本text、图像img、按钮超链接等，只需给父元素设置test-align:center即可。

.center{

     text-align:center;
}
<div class="center">水平居中</div>

 

1.2  块级元素水平居中

• 定宽-块级元素水平居中：在居中的块级元素处加margin:0 auto即可。

 

.center{

        width:200px;

        margin:0 auto;    

}

<div class="center">水平居中</div>

 

• 不定宽-块级元素水平居中

方法1：设置table：通过给要居中显示的元素，设置display: table，然后设置 margin:0 auto;

 

.center{

        display:table;

        margin:0 auto;    

}

<div class="center">水平居中</div>

 

方法2：设置inline-block(多个块状元素）：子元素设置inline-block, 父元素设置text-align:center;

 

.center{

     text-align:center;
}
 

.inlineblock-div{

        display:inline-block;   

}

<div class="center">

        <div class=“inlineblock-div”>1</div>

           <div class=“inlineblock-div”>2</div>

</div>

 

方法3：设置flex布局

只需把要处理的块状元素的父元素设置display:flex; justify-content:center;

.center{

        display：flex;

        justify-content：center;    

}

<div class="center">

        <div class=“flex-div”>1</div>

           <div class=“flexdiv”>2</div>

</div>

 

方法4：position+负margin

方法5：position+margin：auto；

方法6：position+transform；

 

1.3 单行文本垂直居中

设置padding-top=paddingbottom；或

设置line-height=height；

 

1.4 多行文本垂直居中

通过设置父元素table，子元素table-cell和vertical-align；

 

.center{

        display:table;

        width：200px；

               height：300px；

}

.table-div{

              display：table-cell；

              vertical-align：middle；

}

<div class=“center”>

        <div class="table-div>多行文本垂直居中</div>
</div>

 

1.5块级元素垂直居中

• 定高

       方法1：flex布局：在需要垂直居中的父元素上，设置display:flex和align-items:center

       .center{
                     width:200px;

                     height:300px;

                     display :flex;

                    align-itemsLcenter;

        }

     <div class=“center”>

           <div>垂直居中</div>
     </div>

  

    方法2：利用position和负margin（需只宽高）；margin=负一半

 

  

     方法3：利用position和top/bottom 和margin:auto；top/bottom:0;

方法4：利用position和top和transform

transform中translate偏移的百分比就是相对于元素自身的尺寸而言。

注：将top/bottom换成left/right就可以改为块级水平居中；transform方法，可用于未知元素大小的居中。

 

1.6 水平垂直居中

方法1：绝对定位+margin:auto

    div{

        width: 200px;

        height: 200px;

        background: green;

       

        position:absolute;

        left:0;

        top: 0;

        bottom: 0;

        right: 0;

        margin: auto;

    }

方法2：绝对定位+负margin

 

    div{

        width:200px;

        height: 200px;

        background:green;

       

        position: absolute;

        left:50%;

        top:50%;

        margin-left:-100px;

        margin-top:-100px;

    }

方法3：绝对定位+transform

    div{

        width: 200px;

        height: 200px;

        background: green;

       

        position:absolute;

        left:50%;    /* 定位父级的50% */

        top:50%;

        transform: translate(-50%,-50%); /*自己的50% */

    }

 

方法4：flex布局

   .box{

         height:600px; 

        

         display:flex;

         justify-content:center;  //子元素水平居中

         align-items:center;      //子元素垂直居中

           /* aa只要三句话就可以实现不定宽高水平垂直居中。 */

    }

    .box>div{

        background: green;

        width: 200px;

        height: 200px;

    }

 

方法5：table-cell实现居中

display:table-cell;

text-align:center;

vertical-align: middle;