css中div垂直居中的方法。
利用绝对定位实现的居中
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>居中</title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
body {
height: 100%;
overflow: hidden;
}
.father{
position: absolute;
height: 500px;
width: 100%;
background-color:#2AABD2;
}
.children{
position: absolute;
top: 50%;
left: 50%;
background-color: red;
width: 100px;
height: 100px;
margin: -50px 0 0 -50px;
}
</style>
</head>
<body>
<div class="father">
<div class="children">
</div>
</div>
</body>
</html>效果图如下：
利用flex垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>居中</title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
body {
height: 100%;
overflow: hidden;
}
.father{
height: 500px;
width: 100%;
background-color:#2AABD2;
display: flex;
justify-content: center;/*实现水平居中*/
align-items:center; /*实现垂直居中*/
}
.children{
background-color: red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="children">
</div>
</div>
</body>
</html>效果图如下：
transform+relative实现的居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>居中</title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
body {
height: 100%;
overflow: hidden;
}
.father{
position: absolute;
height: 500px;
width: 100%;
background-color:#2AABD2;
}
.children
{
width: 300px;
height: 150px;
background-color: #333333;
position: relative;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
</style>
</head>
<body>
<div class="father">
<div class="children">
</div>
</div>
</body>
</html>效果图如下：
多谢@alexxxcs1提供的另一种方式(不晓得这样能否@到^_^)，嘛其实网上实现居中的方式确实很多，互相探讨加深印象。
css中div垂直居中的方法。的更多相关文章
- css 中 div垂直居中的方法
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- css的div垂直居中的方法，百分比div垂直居中
前言 我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别是手机等web端网页经常是不固定高宽的div,那么这些d ...
- css中添加屏幕自适应方法（rem）
css中添加屏幕自适应方法(rem) 只需要在公共css文件中添加下面代码:设计稿以750px,基础字体为20px为例,兼容性高,使用过程中px转化为rem即可 /*竖屏*/ @media scree ...
- CSS教程:div垂直居中的N种方法以及多行文本垂直居中的方法
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- CSS教程:div垂直居中的N种方法[转]
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- 纯css使div垂直居中，div垂直，div居中的方法
首先编写一个简单的html代码,设置一个父div类名为boxFather,再设置一个子div类名为box1.html代码如下: <div class="boxFather"& ...
- 使用CSS完美实现垂直居中的方法
使用XHTML+CSS来实现元素的垂直居中一直是前端开发中的一个比较复杂且棘手的问题,作为网页设计师或前端开发工程师,这个垂直居中问题也是必须掌握的技巧之一,一些互联网公司面试题中也会出现这类题目.今 ...
- HTML CSS 中DIV内容居中汇总
转载博客(http://www.cnblogs.com/dearxinli/p/3865099.html) (备注:DIV居中情况,网上谈到也比较多,但是这篇文字,相对还是挺全面,现转载,如果冒犯,还 ...
- div垂直居中的方法（转）
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
随机推荐
- 自动化测试--利用opencv进行图像识别与定位
SIFT检测方法 SIFT算法就是把图像的特征检测出来,通过这些特征可以在众多的图片中找到相应的图片 import cv2 #读取图片,以1.png为例 img=cv2.imread('1.png') ...
- Java-JavaMail邮件开发（1）Java Mail
1.仅使用Java Mail 使用163邮箱作为代理服务器: 引入依赖: <dependency> <groupId>com.sun.mail</groupId> ...
- HDU-6187.DestroyWalls(最大生成树)
好吧这个题没什么可说的,有点.... 一开始还和一位大佬在讨论,会不会有多余的边,后面看了题发现没有多于的边和自环,所以之间一波最大生成树把最大的边去掉,把最小的边推倒就行了. #include &l ...
- 分支结构 ：if - else
分支结构 :if - else 格式一: if(条件表达式){ 执行语句; } 格式二:二选一 if(条件表达式){ 执行语句1; }else{ 执行语句2; } 格式三: 多选一 if(条件表达式1 ...
- [2019杭电多校第七场][hdu6646]A + B = C(hash)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6646 题意为求a*10x+b*10y=c*10z满足公式的任意一组解x,y,z. 因为c有可能会由a+ ...
- 洛谷P3502 [POI2010]CHO-Hamsters感想及题解（图论+字符串+矩阵加速$dp\&Floyd$）
洛谷P3502 [POI2010]CHO-Hamsters感想及题解(图论+字符串+矩阵加速\(dp\&Floyd\)) 标签:题解 阅读体验:https://zybuluo.com/Junl ...
- ZPL文件打印
ZPL:全称是Zebra Printer Language,目前能够直接打印zpl文件的打印机只有斑马打印机 如何打印zpl文件呢? 软件类: 一.Print Conductor(桌面打印软件) ht ...
- vue中如何实时修改输入的值
vue中如何实时修改输入的值 经常看到需要对用户输入的值进行实时修改,有时是需要修改为指定的展示内容,有时候是用来校验,禁止用户输入非法数据,总之是一个常见的需求吧,只是自己一直没有特意去关注.思来想 ...
- C#中的==和Equals的区别
一,值类型中的比较,对于值类型,如果对象的值相等,则相等运算符 (==) 返回 true,否则返回 false. ; ; bool bi1 = ai.Equals(bi); //true bool b ...
- AppDomain (转)
AppDomain是CLR的运行单元,它可以加载Assembly.创建对象以及执行程序.AppDomain是CLR实现代码隔离的基本机制. 每一个AppDomain可以单独运行.停止:每个AppDom ...