div居中方法总结
在日常开发过程中，我们会经常使用到div居中来处理布局，今天我就把我在开发过程中，遇到的div居中处理方法总结一下，方便日后查看！
div{
margin:0 auto;
width:200px;
height:200px;
background-color: pink;
}
2、水平垂直居中之让绝对定位的div居中
div {
position: absolute;
width: 300px;
height: 300px;
margin: auto;
top:;
left:;
bottom:;
right:;
background-color: pink;
}
3、水平垂直居中之确定容器的宽高
div {
position: absolute;
width:300px;
height:300px;
top: 50%;
left: 50%;
margin: -150px 0 0 -150px; /* 外边距为自身宽高的一半 */
background-color: pink;
}
div {
position: absolute;
width:300px;
height:300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: pink;
}
5、水平垂直居中之利用 flex 布局
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
height:600px;
}
.container div {
width: 300px;
height: 300px;
background-color: pink;
}
6、div撑满整屏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div撑满整屏</title>
<style>
.page{
background:pink;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
text-align: center;
}
</style>
</head>
<body>
<div class="page"></div>
</body>
</html>
div居中方法总结的更多相关文章
- div 居中方法汇总
本文是从简书复制的, markdown语法可能有些出入, 想看"正版"和更多内容请关注 简书: 小贤笔记 情况一: 父子容器宽高已知 方法一 html <div class= ...
- div居中方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 实现DIV居中的几种方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- div居中和垂直居中的最简单方法
div居中方法: 1)对父盒子添加 text-align="center": 2)子盒子添加 margin:0 auto; 例子: body{text-align:center} ...
- DIV居中的经典方法
1. 实现DIV水平居中 设置DIV的宽高,使用margin设置边距0 auto,CSS自动算出左右边距,使得DIV居中. 1 div{ 2 width: 100px; 3 height: 100px ...
- 纯css使div垂直居中，div垂直，div居中的方法
首先编写一个简单的html代码,设置一个父div类名为boxFather,再设置一个子div类名为box1.html代码如下: <div class="boxFather"& ...
- 让几个横向排列的浮动子div居中显示的方法
div设置成float之后,就无法使子div居中显示了,那么如何让几个横向排列的浮动的div居中显示呢,下面有个不错的方法,希望对大家有所帮助 div设置成float之后,在父div中设置text-a ...
- div居中的三种方法
方法1: #div1{ width:200px; height:200px; background:green; position:absolute; left:0; top:0; right:0; ...
- 用CSS控制DIV居中失效的解决方法
1.一般情况下DIV居中失效是因为没写DTD语句 在页面的最上方加上: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
随机推荐
- 洛谷P2765 魔术球问题（最大流）
传送门 %%%KSkun大佬 话说明明是网络流……这题竟然还有打表找规律和纯贪心AC的……都是神犇啊…… 来说一下如何建图.首先把每一个点拆成$X_i$和$Y_i$,然后$S$向$X_i$连一条容量为 ...
- pip_install的安装
1.下载get-pip.py https://pip.pypa.io/en/latest/installing/#id9 2.运行 python get-pip.py 3.python -m pip ...
- GitHub CEO：GitHub 十年，感谢有你
简评:不知为何,总感觉 GitHub 成立不止 10 年了,你们有这种错觉么? 本文是 GitHub 联合创始人兼 CEO:Chris Wanstrath 在计算机世界杂志写的文章. 当我们回顾 Gi ...
- C#直接使用DllImport外部Dll的方法
C#.Net调用基本格式:[DLLImport(“DLL文件路径”)]修饰符 extern 返回值类型 方法名称(参数列表) 如: [DllImport("kernel32.dll" ...
- 3、pandas
原文出处: pandas.pydata.org 译文出处:石卓林 这是关于pandas的简短介绍,主要面向新用户.可以参阅Cookbook了解更复杂的使用方法. 链接:http://python. ...
- js 原生JS实现轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Dubbo基础配置
服务启动检查配置 默认check=true dubbo:reference check=“false” 关闭某个服务的启动时检查:(没有提供者时报错) dubbo:consumer check=“ ...
- CentOS 7 开放防火墙端口 命令(转载)
CentOS 7 开放防火墙端口 命令 最近公司新的server要求用CentOS7, 发现以前CentOS 6 系列中的 iptables 相关命令不能用了,查了下,发现Centos 7使用fire ...
- QQ在线状态的使用
在网页中显示QQ在线状态并点击后发起对话,是很多门户网站常见的一个功能,这两天就碰到这样一个.原以为很简单,结果还是折腾了半天,虽然是个小问题,但也值得记录一下. 按以前的经验,网上有很多QQ在线代码 ...
- Python之逻辑运算符
这一小节我在动笔之前犹豫到底要不要动手写,虽然简单但是防止遗忘,博主还是决定记录一下.Python中运算符主要分为算术运算符,赋值运算符,比较运算符,逻辑运算符以及成员运算符.下面详细记录这5种运算符 ...