absolute 宽度自适应

absolute 应该是前端开发最常用的position定位属性值之一，对于它如何使用就不详细谈了，这里说一说使用 absolute固定定位后的width问题。

垂直上下居中

//html 
<div class="relative">
	<h6 class="absolute">我是张三</h6>
</div>

//css
.relative{
	position: relative;
}

.absolute{
	position: absolute;
	left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

这是一个简单的根据定位实现的垂直上下居中的效果，目前来看也都没有问题。

但是如果 我是张三 文字非常多，超过 .relative 父元素宽度的一半了呢？

大家可以发现，文字竟然换行了，即便才有父元素一半的宽度，但是通过审查可以发现，隐晦的给absolute 设定了宽度，为父元素的一半

修改left

.absolute{
	position: absolute;
	left: 0;
    top: 0;
}

通过修改left 可以发现，宽度可以自适应了，但是文字却没有居中

left、top、right、bottom

// 上下左右 全部设为0，也可以居中
.absolute{
	position: absolute;
	left: 0;
    top: 0;
    right:0;
    bottom:0
}

设置文字 强制不换行

.absolute{
	position: absolute;
	left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    white-space:nowrap;
}

办法其实很多，这里就不一一举例了，主要是知道 absolute 设置left 值后，宽度会有 父元素一半的坑，规避一下就好