css布局,两个div左右浮动后,里面的盒子如何居中

html-css014

css布局,两个div左右浮动后,里面的盒子如何居中,第1张

给里面盒子一个宽度然后通过margin:auto让他居中

举例

<div style="float:leftwidth:50%">第一个盒子(左)

<div style="width:50pxheight:30pxmargin:auto">里面的盒子</div>

</div>

<div style="float:rightwidth:50%">第二个盒子(右)</div>

盒子居中是相对于父元素来说的,因此我们让盒子居中时,往往采用嵌套的方式,让父盒子套着子盒子 。

在父子盒子嵌套下,让子盒子居中的方式:

第一种方法:position, 使用定位,子绝父相,再left:50%,margin-left:负的盒子宽度的一半,这是最常用的方法

第二种方法:flex,弹性布局,让子盒子居中,但是样式要写在父盒子中,display:flex,just-content:center

第三种方法:在position基础上,把margin-left换成CSS3中的transform:translate(-50px)

第四种方法:在position的基础上,只保留子绝父相,然后在子盒子中加上margin:auto、left:0、right:0;