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

CSS 作者: Rector 674阅读 0评论 0收藏 收藏本文

郑重申明:本文未经许可,禁止任何形式转载

问题描述

在前端开发中,固定位置布局(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>

方案一

设置leftmargin-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;   
}

阅读了该文章的人还浏览了...

本文永久链接码友网 » [CSS]使用CSS样式如何让一个固定位置(position:fixed)的DIV水平居中布局呢?

发布于: 2018-05-14 08:00:41
分享扩散: