绝对定位position:absolute，实现居中对齐

<!doctype html>
<html>
<head>
   <meta charset="utf-8">
   <title>实现居中对齐</title>
   <style>
   .main {
       position: absolute;
       width: 700px;
       height: 500px;
       background: pink;
       left: 50%; //起始是在body中，横向距左50%的位置
       top:50%; //起始是在body中，纵向距上50%的位置，这个点相当于body的中心点，div的左上角的定位
       transform:translate(-50%,-50%);//水平、垂直都居中,也可以写成下面的方式
/*margin-left:-350px;
margin-top:-250px;*/
   }
</style>
</head>
<body>
   <div class="main">第1个固定</div>
</body>

绝对定位position:absolute，实现居中对齐相关推荐

css position:absolute 如何居中对齐
要写死宽度,就好弄了 position: absolute; left: 50%; width: 980px; margin-left: -490px; text-algin:center
position属性:绝对定位position: absolute；相对定位 position: relative；固定定位 position: fixed；
position 属性: position常见的定位模式: 定位模式描述是否脱离文档流移动模式定位偏移属性 static 默认属性对象遵循常规流不移动不移动 relative 相对定位 ...
前端——如何用绝对定位(position:absolute)完美定位布局及其注意事项
在布局的过程中我们经常用到绝对定位,很多初学者在一开始用绝对定位经常会达不到预期的效果,因为它们往往会忽略使用绝对定位的两个条件. 什么?使用绝对定位还要条件??? 当然要啦!代码又没有脑子,没法自己 ...
Vue进阶（幺肆叁）：如何用绝对定位(position:absolute)完美定位布局及其注意事项
文章目录一.前言二.标准流 2.1 排布规则三.Demo 四.拓展阅读一.前言在<Vue进阶(幺肆贰):CSS-静态定位,相对定位,绝对定位,固定定位的用法和区别详解>一文中,讲 ...
绝对定位position:absolute；实现居中对齐
源码: <!doctype html> <html> <head><meta charset="utf-8"><title&g ...
CSS 元素的绝对定位 position: absolute 和 position: fixed
当一个元素的 position属性设置为 absolute 或 fixed,它将使用绝对定位.绝对定位的元素将从文档流中完全删除,它原先在正常文档流中所占的空间会关闭,就好像该元素不存在一样,因此不会 ...
HTML中定位之绝对定位position:absolute;
position: absolute; 盒子发生绝对定位,将脱离原来文本,盖在其他盒子之上,进行定位操作时,将按照某一个父级进行定位,该父级具有以下特点: 1.position 属性是非static ...
css深入浅出系列之：绝对定位 position:absolute
css深入浅出系列只是自己在学习css的时候的一些个人见解,有错误的地方,欢迎在评论中指正噢~ 今天主要在以下几个方面来展开: 1.什么是绝对定位 2.如何确定绝对定位元素的定位点 3.absolut ...
position:absolute 绝对位置如何居中对齐
#container {position: absolute; left: 50%; width: 980px; margin-left: -490px; //除去自身的宽度,就是居中位置 }

绝对定位position:absolute，实现居中对齐

绝对定位position:absolute，实现居中对齐相关推荐

最新文章

热门文章