<div> <div >我要居中</div> <div>

最外层的DIV给个宽度，里面的div给个margin: 0 auto

还有 flex布局中的居中 //外层div display:flex; justify-content:center; align-items:center;

如何让div中的div居中

方案一

父级div  `text-align:center`
子级div  `display: inline-block;`

方案二

 // 子级div宽度未知(跟随子级内容变化而变化)

<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>

方案三

 // 子级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 居中 参考张鑫旭的CSS世界 --> 
<div class="pos-rlt">
    <div class="pos-abt"></div>
</div>
</html>

如何让div中的div居中

方案一

方案二

方案三

方案四 margin:auto 居中

你尚未登录，登录后可以

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

如何实现类似豆包的AI改写框跟随内容滚动效果？

如何在CSS中实现滚动条不溢出圆角框？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

如何在Ant Design表格中同时设置scroll.x和scroll.y且表头不换行？

表数据复制一条添加到数据库，前端跳转到数据所在的page页，滚动到对应行并添加高亮样式异常？

tailwind css group hover的触发问题?