css中如何使盒子水平居中

html-css0184

css中如何使盒子水平居中,第1张

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

在父子盒子嵌套下，让子盒子居中的方式：

第一种方法：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；

可以为盒子添加“text-align: center”样式使图片在盒子中居中。

1、新建html文档，在body标签中添加一个div盒子，然后在这个div盒子中添加一张图片：

2、为div盒子和图片添加一些样式，这时默认情况下图片会向盒子的左上角对齐：

3、为div盒子添加“text-align: center”样式，这时图片会在div盒子中居中对齐：