css中如何使盒子水平居中

html-css052

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盒子中居中对齐: