img div 等文档元素居中布局的方法

搞怪程序猿

于 2017-09-02 21:09:07 发布

阅读量274

点赞数

分类专栏： css布局文章标签：布局居中 html css

本文链接：https://blog.youkuaiyun.com/zjl516088421/article/details/77803797

版权

1 篇文章

订阅专栏

本文介绍了两种实现网页顶部导航栏水平居中的方法：一种结合使用 margin 和 transform 属性；另一种利用 position 和 margin 属性。这两种方法适用于固定宽度的导航栏元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一：“margin-left” +  “transform”

#app .home .top-nav{
  width: 480px;
  margin-left: 50%;
  transform: translateX(-240px); 或者 transform: translateX(-50%);

}

方法二：“position” + “margin-left”

#app .home .top-nav{
  width: 480px;
  margin-left: -240px;
  position: fixed;
  left: 50%;
}