[CSS]使用CSS样式如何让一个固定位置(position:fixed)的DIV水平居中布局呢？

问题描述

在前端开发中，固定位置布局(position:fixed)是常见的应用场景，特殊情况下，我们更需要将固守位置(fixed)的DIV水平居中布局？

使用CSS如何实现将一个固定位置(position:fixed)的DIV水平居中布局呢？

比如有如下的固定布局DIV:

<div class="menu">
    ...
</div>

<style type="text/css">
.menu{
    position:fixed;
    width:800px;
    top:0;
}
</style>

方案一

设置left和margin-left属性，如下：

left: 50%;
margin-left: -400px; /* 设置margin-left为整个DIV的一半 */

方案二

此方案为CSS3以下版的解决方案，但此方案适合所有的元素，包括没有with属性以及动态with的元素。

水平居中：

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

垂直居中：

top: 50%;
transform: translateY(-50%);

水平和垂直居中：

left: 50%;
top: 50%;
transform: translate(-50%, -50%);

方案三

设置left:0,right:0,margin:auto，如下：

#menu {
    position: fixed;   
    left: 0;           
    right: 0;           
    top: 0px;         
    width: 500px;      
    margin: auto;      /* 水平居中 */
    max-width: 100%;   
    z-index: 10000;   
}