在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ 如何讓div中的div居中

如何讓div中的div居中

<div>

<div >我要居中</div>

<div>

回答
編輯回答
凹凸曼

方案一

父級(jí)div  `text-align:center`
子級(jí)div  `display: inline-block;`

方案二

 // 子級(jí)div寬度未知(跟隨子級(jí)內(nèi)容變化而變化)

<style>
    .wrapper {
        width: 100%;
        height:300px;
        background-color: #e6e6e6;
    }
    .wrapper .item {
        display: inline-block;
        position: relative;
        top:50px;
        left:50%;
        transform: translateX(-50%);
        padding: 10px;
        background-color: #505050;
        color:#fff;

    }

</style>
<div class="wrapper">
    <span class="item" >
        我要居中我要居中我要居中我要居中
    </span>
</div>

方案三

 // 子級(jí)div寬度已知

<style>
     .wrapper {
        width: 100%;
        height:300px;
        background-color: #e6e6e6;
    }
    .wrapper .item {
        display: inline-block;
        position: relative;
        width: 300px;
        top:50px;
        left:50%;
        margin-left: -150px;
        padding: 10px;
        background-color: #3279a4;
        text-align: center;
        color:#fff;

    }
 </style>
<div class="wrapper">
    <span class="item" >
        我要居中我要居中我要居中我要居中
    </span>
</div>

方案四 margin:auto 居中

<style>
  .pos-rlt {
     position: relative;
     width: 500px;
     height: 300px;
     background-color: #08c;
 }
 .pos-abt {
     position: absolute;
     top:0;
     left:0;
     right:0;
     bottom:0;
     width:200px;
     height:100px;
     background-color: #fff;
     margin: auto;
 }
</style>
<html>
<!-- margin:auto 居中 參考張?chǎng)涡竦腃SS世界 --> 
<div class="pos-rlt">
    <div class="pos-abt"></div>
</div>
</html>
2018年1月20日 23:15
編輯回答
葬憶

最外層的DIV給個(gè)寬度，里面的div給個(gè)margin: 0 auto

2017年10月10日 19:00
編輯回答
涼薄

還有 flex布局中的居中

//外層div
display:flex;
justify-content:center;
align-items:center;
2017年1月27日 04:17
編輯回答
尛曖昧
<style>
.main .son{
    text-align:center;
}
</style>

<div class="main">
    <div class="son">我要居中</div>
<div>
2018年8月12日 02:56