css中如何设置div居中显示?本文总结了几种我们在工作中用到的几种方法,仅供参考,可以根据自己的实际情况来选择使用哪种方法,如下我为父级div设置的class为parent,子级div设置的class为child。
工具/原料
1
sublime(或者其他代码编辑器)
2
电脑
方法/步骤
1
定位法:position:absolute如果子级div有定义宽和高的话就可以用这个方法。注意:margin-top,和margin-left的值均为高和宽值的一半。大家可以去尝试下看看效果。
2
margin:auto法这个也可以是定位法。用这个方法要求子级div必须设置宽的值,不然没有效果哦~margin:auto是水平垂直都居中,如果仅仅设置水平居中,可设置为margin:auto 0;同理,如果仅仅设置垂直居中,可设置为margin:0 auto.
3
display:table-cell法这个方法主要针对多行文字内容的垂直居中对齐。注意:text-align:center设置了文字的水平居中对齐,vertical-align:middle设置的是垂直居中对齐。
4
transform:translate(x,y)法这个是css3中的新属性,如果子级元素没有设置宽和高值的话可以用这个方法来实现。这在我们做自适应页面的时候可以用到。
5
before,after伪元素法这个也是让子级元素垂直居中了。如果还想要水平居中的话可以配合其他几种方法配合使用来实现,比如给子级元素设置:margin:0 auto;这样就水平和垂直都居中了。
6
Flex布局法这个方法要充分考虑浏览器的兼容性。要垂直居中的元素也是无需设置宽和高的值,可以用在自适应页面中来实现水平垂直居中。
注意事项
1
不同的情况选择不同的方法来实现效果
2
可以配合使用来实现垂直和居中的效果
上一篇:html如何设置垂直居中
下一篇:CSS实现DIV居中的三种方法