【CSS】absolute 元素完全居中的两种方法

方法一:(不能微调

position:absolute;

left:0; right:0; top:0; bottom:0;

margin:auto;

方法二:(可微调)

position:absolute;

top:50%; left:50%;

margin-top:-100px;(元素高度的一半)

margin-left:-100px;(元素宽度的一半)

时间: 2024-08-11 22:07:42

【CSS】absolute 元素完全居中的两种方法的相关文章

div等块级元素居中的两种方法

以下两种方法是针对宽度确定的块级元素而言的 1.设置块级元素CSS属性为: margin: 0 auto: 即左右margin设置为auto. 2.设置块级元素的display为inline(此时要求块级元素包含内容,否则由于内联元素的高度设置不起作用,相当于高度为零,块级元素就无法被看到)或者inline-block. 该块状元素的父级元素CSS设置: text-align:center; 此时会将该块状元素看作text进行居中处理.

枚举有重复元素的排列的两种方法

我们假设A数组是方案数组,P数组是模板数组. 对于每一种方案,从第一个位置开始放元素,一个一个放. 我们原有的打印全排列的方法是不允许A数组中出现重复元素的,如下代码所示: void dfs(int dp) { if(dp>n) { for(int i=1;i<=n;i++) cout<<a[i]<<" "; ans++; cout<<endl; return; } for(int i=1;i<=n;i++) { if(!vis[i

css:图标与文字对齐的两种方法

(好久没写博客了,这几个月的积累比较零碎,记在本子上,现在开始整理归类) 在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向对齐为middle, <div> <img src="" class="heart"> <span>1169</span> <img src="" class="comment"

css绝对定位元素实现居中的几个方法

一:CSS绝对定位元素left设为50%实现水平居中 绝对定位的元素left设为50%时,是已左上角为原点的,所以只要再使用margin属性添加负值补偿回来即可.示例:[css]代码如下: #board{ width:60%; padding:3%; background:#09F; position:absolute; top:0px; left:50%; margin-left:-30%; } 这样就能使得一个蓝色区域水平居中   二.绝对定位元素的完全居中实现 如果要问如何CSS实现绝对定

js实现元素宽度反弹的两种方法

方法一:此方法,不是我想的,但是超级喜欢,太漂亮了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>02</title> <style> #outer{ width:1400px; height:400px; background-color: pink; } #inner{ width:20

用CSS实现水平虚线的两种方法

用CSS样式实现水平虚线的两种方法方法一:<br><br><hr size="1" noshade="noshade" style="border:1px #cccccc dotted;"/><br>方法二:<br><br><div style="border-top:1px dashed #cccccc;height: 1px;overflow:hidden

列表查找的两种方法

列表查找:从列表中查找指定元素 输入:列表.待查找元素 输出:元素下标或未找到元素 列表查找的两种方法: 顺序查找 从列表的第一个元素开始,顺序进行搜索,直到找到为止. 二分查找 (大前提有序)从有序列表的候选区[0:n]开始,通过对待查找的值与候选区中间值的比较,可以使候选区减少一半. 1.顺序查找代码:(时间复杂度为O(n)) def linear_search(data_set, value): for i in range(len(data_set)): if value == data

CSS实现自适应不同大小屏幕的背景大图的两种方法(转自简书)

CSS实现自适应不同大小屏幕的背景大图的两种方法 一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 用CSS实现真的很简单很简单,下面我们来看一下第一种方法具体的代码: HTML代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <m

CSS实现背景图尺寸不随浏览器大小而变化的两种方法

一些网站的首页背景图尺寸不随浏览器缩放而变化,本例使用CSS 实现背景图尺寸不随浏览器缩放而变化,方法一. 把图片作为background,方法二使用img标签.喜欢的朋友可以看看 一些网站的首页背景图尺寸不随浏览器缩放而变化,例如百度个人版的首页,缩放后背景图的尺寸并不改变:  再比如花瓣网( huaban.com ): 现在用CSS来实现这一效果. 首 先需要一张足够大尺寸的图片,上图百度背景图的尺寸为1600*1000px( 图片地址:http://4.su.bdimg.com/skin/