html 固定定位怎么居中,固定定位下的div水平居中

justify-content: center;

align-items: center;/*单行下的居中对齐*/

或

justify-content: center;

align-content: center;

flex-wrap: wrap;/*多行下的居中对齐*/

然而，这种对齐方式是基于父元素开启了flex布局方式，假设该子元素开启了固定定位后，这种对齐方式便会失效，因为固定定位脱离了文档流，不受父元素的影响，父元素内对子元素的定位方式自然就不起作用了，那么问题来了：能否将这个固定定位的盒子居中显示呢？

方法是人想出来的。

在这里，我们可以结合css3和百分比定位达到目的：

.search_box {

position: fixed;

top: 0;

left: 50%;

-webkit-transform: translateX(-50%);

transform: translateX(-50%);

width: 100%;

max-width: 540px;

min-width: 320px;

/* 固定定位，脱离文档流 */

height: 44px;

/* 通过与left配合，使这个div居中显示 */

}

第一步：定位在50%,此时盒子会在居中靠右位置，但盒子的起点位于屏幕居中位置， top: 0;  left: 50%; //以屏幕为基准，定位使盒子移动屏幕的一半

第二步：使用transform：translateX(-50%)：将盒子水平向左位移到自身宽度的一半。//以自身为基准 ，通过transform使盒子移动自身宽度的一半

这样，就完成了水平居中显示.