定位盒子的居中设置

布局中会经常性的使用到定位，而定位会带来一定的好处，也有一定的坏处
例如下方的例子
在这里插入图片描述
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定盒子居中显示</title>
    <style>
        *{
            margin: 0;
        }
        div{
            position: absolute;
            width: 50%;
            height: 44px;
            background: cornsilk;
        }
    </style>
</head>
<body>
<div>
    我是固定的盒子
</div>
</body>
</html>

当我需要对这个设置了定位的盒子进行居中布局时，是不能够使用

div{
	margin: 0 auto;
}

的css样式的

所以现在的我有两种布局方式

设定left值，自己测量盒子距离边距的宽度（可以设置百分比，也可以设定固定值）
缺点：
1. 耗费时间，且可能测量不准；
2. 若设置了固定值，在不同的分辨率中，会呈现不同的布局；
巧用CSS3中的translate属性

在上方的css样式中添加下列样式

/*设置盒子定位在父盒子的一半位子*/
left: 50%;
/*应用css3的transform属性，设置本盒子对应x轴向左平移自己的一半*/
transform: translateX(-50%);

总的css样式为

*{
	margin: 0;
}
div{
	position: absolute;
	top: 0;
/*设置盒子定位在父盒子的一半位子*/
	left: 50%;
/*应用css3的transform属性，设置本盒子对应x轴向左平移自己的一半*/
	transform: translateX(-50%);
	width: 50%;
	height: 44px;
	background: cornsilk;
}

则可以形成下列的效果
在这里插入图片描述
注：这里的盒子指代的是块级元素

原文链接：https://blog.csdn.net/LHarashi/article/details/116240871