css设置绝对定位居中

很多网页都使用到position:absolute绝对定位，使用了绝对定位后对应模块就无法居中了，今天让我一起来看看绝对定位如何居中吧。

操作方法

  • 01

    新建一个html文件。如图：

  • 02

    在html文件上找<body>标签，在<body>标签中创建<div>标签并设置class类： <div class="fixed"> fixed浮动居中 </div> 如图：

  • 03

    对div设置基本属性。html文件找到<title>标签，在这个标签后新建一个<style>标签，然后在<style>标签里设置class类为fixed的属性为：宽为300像素，高为150像素，背景为红色，相对于浏览器窗口定位，距离浏览器顶部位置为20% 样式代码： <style> .fixed{ width: 300px; height: 150px; background-color: red; position: fixed; top: 20%; } </style>

  • 04

    查看样式效果，保存html文件后使用浏览器查看设置的效果。如图：

  • 05

    设置position:fixed 居中。为了给div自动居中显示，只需要在fixed类中再添加： left: 0; right: 0; margin:0 auto; 如图：

  • 06

    查看居中效果。保存html文件后使用浏览器打开，浮动就居中了。如图：

  • 07

    把所有代码复制到新建的html文件保存后使用浏览器打开即可看到效果。 所有代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>position: fixedn居中</title> <style> .fixed{ width: 300px; height: 150px; background-color: red; position: fixed; top: 20%; left: 0; right: 0; margin:0 auto; } </style> </head> <body> <div> fixed浮动居中 </div> </body> </html>

赞 (0)

相关推荐

  • css设置背景图片居中；css背景图片自动居中

    如何通过css设置一张背景图片自动水平垂直居中呢?可以通过css提供的background-position: center进行设置. 设置代码: .bg-img{ height: 100vh; wi ...

  • css设置文字竖版排列，并且垂直居中

    通过设置css,使文字竖版排列,并且垂直居中 操作方法 01 初始设置一个父div的宽度和高度,为了方便查看,设置背景色为红色 有个子div显示文本,希望该文本在父div中竖版排列,并且垂直居中 02 ...

  • 网页中如何用HTML/CSS实现文字居中于图片

    在网页设计布局中,很多网页设计者都会遇到如何让文字居中于图片的问题.其实,实现这一过程比较简单,只要让图片作为背景图片,再设置文字在 垂直和水平方向上的居中.下面,小编通过一个简单实例,结合自己的,来 ...

  • css设置div在网页中垂直居中

    css设置div在网页中垂直居中方法很多,这是本人常用的方法 我们要做一个在网页中垂直水平方向都居中的一个div来作一个如下效果的框 操作方法 01 本实例以新文档开始 02 先放置一个div,并且设 ...

  • EXCEL怎么设置数字居中

    设置数字居中的方法如下 一 1.在没有经过对齐方式设置的单元格里,默认地数值和日期靠右对齐,其它的非纯数字的字符串靠左对齐. 2.选择单元格或单元格区域,点击开始选项卡里的水平居中对齐按钮,可使单元格 ...

  • Word论文写作怎么设置公式居中.编号右对齐

    Word论文写作中公式居中.编号右对齐的设置技巧 工具/原料 Microsoft Word 2013/2010/2007 MathType 表格法 第一步:插入表格 在公式所在行居中插入一行三列的表格 ...

  • WPS怎么设置公式居中标号靠右显示?

    在wps编辑论文中的数学公式时,经常需要设置公式居中,公式的标号靠右这个格式,下面我们就来介绍如何在A4纸格式下完成这个操作. 点击开始→制表位,弹出制表窗口.注:我的wps背景是浅绿色,这个是因为我 ...

  • 如何在Wps Word 表格中设置无法居中的文字

    如何在Wps Word 表格中设置无法居中的文字

    有的小伙伴在使用WPS Word表格软件编辑数据时,为了使数据看起来更加整齐,想要居中文字,但是却发现无法居中,那么该如何进行设置呢?小编就来为大家介绍一下吧.具体如下:1. 第一步,双击或者右击打开 ...

  • 如何在QQ音乐中将歌词的对齐方式设置为居中对齐

    如何在QQ音乐中将歌词的对齐方式设置为居中对齐

    电脑版QQ音乐软件被很多人使用,用来听歌,看mv等,有的用户在使用该软件时,为了可以看清楚歌词,因此想要将歌词的对齐方式设置为居中对齐,但是却不知道如何设置,那么小编就来为大家介绍一下吧.具体如下:1 ...