css的div动态水平垂直居中
div动态水平垂直居中,思路如下:
(1)先定位。如果相对于距离最近的父元素,用absolute;如果相对于body,用fixed。
(2)然后,top和left都设为50%。
(3)要居中的div的margin-top和margin-left,都设置为该div高度和宽度的一半。
position:absolute;
width:200px;
height:100px;
left:50%;
top:50%;
border:1px solid red;
margin-left:-100px;
margin-top:-50px;
如果只是水平居中,只用一个margin就行了。
margin:0 auto;
css的div动态水平垂直居中的更多相关文章
- CSS:div/img水平垂直居中
div水平垂直居中方法一: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- JS实现div动态水平垂直居中
在做页面的过程中,在很多地方都会遇到元素需要水平垂直的居中这个问题,之前总是去网上搜别人的代码,今天仔细研究了一下,分享给大家,先写一个简单的例子: <div class="mui-c ...
- CSS布局中的水平垂直居中
CSS布局中的水平垂直居中 各位好,先说两句题外话.今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客.今天非常有幸开通博客,在此也写一篇关于 ...
- css3 flex 详解,可以实现div内容水平垂直居中
先说一下flex一系列属性: 一.flex-direction: (元素排列方向) ※ flex-direction:row (横向从左到右排列==左对齐) ※ flex-direction:row- ...
- CSS布局:元素水平垂直居中
CSS布局:元素水平垂直居中 本文将依次介绍在不同条件下实现水平垂直居中的多种方法 水平垂直居中是在写网页时经常会用到的需求,在上两篇博客中,分别介绍了水平居中和垂直居中的方法.本文的水平垂直居中就是 ...
- css知识笔记:水平垂直居中(别只看,请实操!!!)
css实现元素的水平垂直居中. (尝试采用5W2H方法说明): 别只看,请实操!!! What: 1.这篇文档主要描述元素水平方向居中的几种最常见和最实用的几种方式,并说明优缺点. 2.写这篇文章的目 ...
- div盒子水平垂直居中方法
文章转载自:div盒子水平垂直居中的方法 - 雪明瑶 这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居 ...
- div盒子水平垂直居中的方法推荐
父盒子是position:relative 方法一:(宽高确定) div绝对定位水平垂直居中[margin 负间距], 方法二: (宽高确定) div绝对定位水平垂直居中[margin:auto实现绝 ...
- css中:如何让一个图片(不知道宽高,宽高可能比父元素div大),在父元素div内部水平垂直居中,并且不溢出父元素div,且图片不拉伸变形(可等比例缩小)?
欢迎进入:http://www.jscwwd.com/article/list/%E5%85%A8%E9%83%A8 效果图: 不管父元素的宽高怎么变化,图片都是水平垂直居中的,并且不溢出父元素. 注 ...
随机推荐
- python 3.6 安装 opencv 3.4
一种说法是,到opencv官网下载相应的版本opencv,解压,把cv2.pyd放到 python安装文件夹下的\Lib\site-packages里即可, 此时import cv2即可成功 我的没有 ...
- Linux 进程调度笔记(一)
主要讨论的是单核 CPU 的情况下,进行调度的一些算法和思路.讨论都是基于单核 CPU 的条件下进行. 在内存中,无论对于用户而言有多少个进程,但在 CPU 运行的时候,总是只有只执行一个进程.进程调 ...
- Java设计模式(三)简单工厂模式
定义与类型 定义:由一个工厂对象决定创建出哪一种产品类的实例 类型:创建型,但不属于GOF23种设计模式 适用场景 工厂类负责创建的对象比较少 客户端(应用层)只知道传入工厂类的参数,对于如何创建对象 ...
- MySQL在大数据、高并发场景下的SQL语句优化和"最佳实践"
本文主要针对中小型应用或网站,重点探讨日常程序开发中SQL语句的优化问题,所谓“大数据”.“高并发”仅针对中小型应用而言,专业的数据库运维大神请无视.以下实践为个人在实际开发工作中,针对相对“大数据” ...
- linux(服务器)如何确认网卡(网口)对应的配置文件
服务器装完系统就要配置网络,然而服务器经常是多网卡多网口,我们在某个网口插上网线后,到/etc/sysconfig/network-scripts/下配置ip时无法确定网口对应的配置文件.(比如是et ...
- Java中的实体类--Serializable接口、transient 关键字
在java中,实体类是一个非常重要的概念,我们可以在实体类中封装对象.设置其属性和方法等.关于实体类,也经常涉及到适配器模式.装饰者模式等设计模式.那么在实际代码开发中,关于实体类的注意事项有哪些呢? ...
- 问题 C: To Fill or Not to Fill
#include <cstdio> #include <vector> #include <algorithm> #include <cmath> us ...
- 1级搭建类108-Oracle 11gR2 SI FS(Windows Server 2019)公开
Oracle 11gR2 单实例文件系统在Windows Server 2019上的安装 在线查看
- JAVA并发同步互斥实现方式总结
大家都知道加锁是用来在并发情况防止同一个资源被多方抢占的有效手段,加锁其实就是同步互斥(或称独占)也行,即:同一时间不论有多少并发请求,只有一个能处理,其余要么排队等待,要么放弃执行.关于锁的实现网上 ...
- nginx技术
Nginx 处理高并发,单台服务器存在服务瓶颈 Nginx属于nio ,noblocking Io非阻塞式的 Apache属于Bio,Blocking IO 阻塞式的 安装部分 依赖安装:yum -y ...