如何让一个DIV水平,垂直方向都居中于浏览器?
<style type="text/css">
<!--
div {
position:absolute;
top:50%;
left:50%;
margin:-150px 0 0 -200px;
width:400px;
height:300px;
border:1px solid #008800;
}
-->
</style>
<div>让层垂直居中于浏览器窗口</div>
其实解决的思路是这样的:首们需要position:absolute;绝对定位。而层的定位点,使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。
如:一个层宽度是400,高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为-150。margin-left的值为-200。这样我们就实现了层垂直居中于浏览器的样式编写。
如何让一个DIV水平,垂直方向都居中于浏览器?的更多相关文章
- Android RecyclerView(瀑布流)水平/垂直方向分割线
Android RecyclerView(瀑布流)水平/垂直方向分割线 Android RecyclerView不像过去的ListView那样随意的设置水平方向的分割线,如果要实现Recycle ...
- HTML-移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中
pc端让一个弹窗水平和垂直方向居中,在知道弹窗宽高的情况下很好计算,只需要用如下css即可: #date{ width: 300px; height: 300px; position: absolut ...
- CSS居中问题:块级元素和行级元素在水平方向以及垂直方向的居中问题
元素的居中问题是每个初学者碰到的第一个大问题,在此我总结了下各种块级 行级 水平 垂直 的居中方法,并尽量给出代码实例. 首先请先明白块级元素和行级元素的区别 块级元素 块级元素水平居中 1:marg ...
- 一个Div在BOdy中上下左右居中
在body中让一个DIv居中 上下左右 <body> <div style=" width:800px; height:500px; position:absolute; ...
- 【原】用css让一个容器水平垂直
这种css布局平时用的比较多,也是面试题常出的一个题,网上一搜一大丢,不过还是想自己总结一下. 这种方法比较多,本文只总结其中的几种,以便加深印象. 效果图都为这个: 方法一:position加mar ...
- css 元素水平垂直方向居中
html部分 <div class="parent"> <div class="child"> - -居中- - </div> ...
- CSS div水平垂直居中和div置于底部
一.水平居中 .hor_center { margin: 0 auto; } 二.水平垂直居中 .content { width: 360px; height: 240px; } .ver_hor_c ...
- 如何让一个div水平和垂直居中对齐
以下方法来自百度知道:https://zhidao.baidu.com/question/558984366971173044.html 方法1: .parent { width: 800px; he ...
- DIV水平垂直布局
<%@ page language="java" pageEncoding="utf-8" import="java.util.*,com.ta ...
随机推荐
- Hibernate--使用xml配置映射关系
写在前面: 配置实体类与数据库的映射关系,有两种方式: 1.使用*.hbm.xml 2.使用@注解 二:xml的配置方式: eg:员工的xml配置文件: <?xml version=" ...
- 给虚拟机添加新硬盘并分区,fdisk查看分区,分区,重新读取分区表信息partprobe,格式化,挂载,查看分区挂载信息,自动挂载文件/etc/fstab,/etc/fstab文件错误导致重启崩溃后的修复
1.虚拟机关机断电 2.添加硬盘 2.开机 3.fdisk -l查看刚才新添加的硬盘 [root@localhost ~]# fdisk -l 磁盘 /dev/sda:21.5 GB, 2147483 ...
- ES6之Class
ES6中的Class和JS的比起来无疑是让对象原型的写法更加清晰,更像面向对象编程的语法而已,注意一个问题ES6里面的Class的内部定义的所有方法都是不可枚举的,而且在ES6中Class不存在变量提 ...
- iOS 多线程 简单学习NSThread NSOperation GCD
1:首先简单介绍什么叫线程 可并发执行的,拥有最小系统资源,共享进程资源的基本调度单位. 共用堆,自有栈(官方资料说明iOS主线程栈大小为1M,其它线程为512K). 并发执行进度不可控,对非原子操作 ...
- NOIP2017day1游记
NOIP 2017总结 Day1 Day1T1 第一眼看到瞬间慌掉,woc这玩意啥! 然后懵逼了两分钟 好的 我相信他是NOIP第一题 那我就打个表吧 然后花五分钟打了个暴力 玩了几组数据 哇!好像有 ...
- oracle初级(续)
有志者.事竟成,破釜沉舟,百二秦关终属楚: 苦心人.天不负,卧薪尝胆,三千越甲可吞吴. oracle基本简单的用法,之前的笔记稍作整理一下,希望对各位有用,如有问题可在下方留言,所有SQL都是经过or ...
- linux命令(shell)
1.cat查看一个文件,linux默认bash 2.echo回显命令 3.ls 4.history历史记录,查看使用过的命令 5.根目录下文件目录 6.bin目录下内容多为应用程序和命令 7.boot ...
- 在Ubuntu14.04下安装 labelImg (标数据用)
安装 SIP 下载 SIP 并解压 : $ sudo python configure.py $ make $ sudo make install 安装 依赖库 $ sudo apt-get ins ...
- [置顶]
xamarin Tablayout+Viewpager+Fragment顶部导航栏
最近几天不忙,所以把项目中的顶部导航栏的实现归集一下.android中使用TabLayout+ViewPager+Fragment制作顶部导航非常常见,代码实现也比较简单.当然我这个导航栏是基于xam ...
- xamarin android 在代码中如何设置文本颜色
xamarin android 在代码中如何设置文本颜色 TextView v = FindViewById<TextView>(Android.Resource.Id.Message); ...