14
2020
12

如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?如何居中一个img(position定位)

水平居中div:


border: 1px solid red;

margin: 0 auto; 

height: 50px;

width: 80px;复制代码

水平垂直居中一个浮动元素(position定位)


第一种:未知元素宽高


<div class="outer">

    <span>我想居中显示</span>

</div>

<style>

    .outer{

        width:300px;

        height:300px;

        position:relative;

        background-color:#ccc;

    }

    span{

        float:left;

        position:absolute;

        backgroond-color:red;

        top:50%;

        left:50%;

        transform:translate(-50%,-50%);

    }

</style>复制代码

第二种:已知元素宽高的


<div class="outer">

    <span>我想居中显示</span>

</div>

<style>

    .outer{

        width:300px;

        height:300px;

        position:relative;

        background-color:#ccc;

    }

    span{

        float:left;

        position:absolute;

        backgroond-color:red;

        width:150px;

        height:50px;

        top:50%;

        left:50%;

        margin:-25px 0px 0px -75px;

    }

</style>复制代码

如何垂直居中一个img(display : table-cell 或者 position定位)


<div class="outer">        

    <img src="nz.jpg" alt="">    

</div>

<style>        

    .outer{            

        width: 300px;           

        height: 300px;            

        border: 1px solid #cccccc;            

        display: table-cell;            

        text-align: center;            

        vertical-align: middle;        

    }        

    img{            

        width: 150px;            

        height: 150px;        

    }    

</style>复制代码

绝对定位的div水平垂直居中:


border: 1px solid black;

position: absolute;

width: 200px;

height: 100px;

margin: auto;

left: 0;

right: 0; 

top:0;

bottom:0;复制代码


« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。