不确定宽的子元素在父元素中的水平居中(也可以水平垂直居中)

不确定宽的子元素在父元素中的水平居中

	一般没有设置宽的子元素想要在父元素中水平居中,子元素可能是后端返回给我们的数据,将宽度写死肯定不合适,因此可用定位方法将子元素水平居中,
	定位实现效果如下



    
    
    不确定宽的子元素的水平居中


    
儿子

效果如图
不确定宽的子元素在父元素中的水平居中(也可以水平垂直居中)_第1张图片
没有设置宽高的div, 子元素内容自适应,如果不使用定位,子元素不设置宽高,子元素会继承父元素的宽,margin:0 auto; 便不适用

2,使用弹性盒
代码如下




    
    
    不确定宽的子元素的水平居中


    
儿子

效果如图
不确定宽的子元素在父元素中的水平居中(也可以水平垂直居中)_第2张图片
子元素没有设置宽高,宽度自适应了,但高度继承了父元素,
给父元素加属性 align-items:center; 高度也会自适应,并且水平垂直居中
不确定宽的子元素在父元素中的水平居中(也可以水平垂直居中)_第3张图片

你可能感兴趣的:(不确定宽的子元素在父元素中的水平居中(也可以水平垂直居中))