Spirit带你了解CSS各个方向的居中方案
水平居中和垂直居中的方案
先看HTML的骨架
后面的代码都是基于这个来写的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="./style.css">
<body>
<div class="box vertical align"></div>
</body>
</html>
水平居中
通过 margin 水平居中
/* 1. 通过margin 水平居中 */
.box {
width: 200px;
height: 200px;
background-color: orange;
}
.align {
margin: 0 auto;
}
通过 position 和 transform 水平居中
/* 2.通过 position 和 transform 水平居中 */
.box {
width: 200px;
height: 200px;
background-color: orange;
}
.align {
position: relative;
left: 50%;
transform: translateX(-50%);
}
通过flex水平居中
body {
display: flex;
justify-content: center;
}
通过 text-align:center 水平居中
注意:使用text-align的时候,子元素要设置为行内块元素,是利用了行内元素的特性
body {
text-align: center;
}
.box {
display: inline-block;
width: 200px;
height: 200px;
background-color: orange;
}
垂直居中
flex布局垂直居中
可以在父类上加 align-item:center实现垂直居中
body {
height: 100vh;
display: flex;
align-items: center;
}
也可以在子类元素上加 align-self:center 实现垂直居中
.box {
align-self: center;
width: 200px;
height: 200px;
background-color: orange;
}
通过position和transform 来垂直居中
/* 第二种方案 position和transform */
.vertical{
position: relative;
top: 50%;
transform: translateY(-50%);
}
绝对居中
flex布局实现绝对居中
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
通过 position和transform 实现绝对居中
/* 第二种方案 position和transform */
.box {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Spirit带你了解CSS各个方向的居中方案的更多相关文章
- 带你走进CSS定位详解
学习CSS相关知识,定位是其中的重点,也是难点之一,如果不了解css定位有时候都不知道怎么用,下面整理了一下关于定位属性的具体理解和应用方案. 一:定位 定位属性列表 position top bot ...
- mvc后台传到前台的值带html标签css（解决方法）
mvc后台传到前台的值带html标签css MVC中要用:@Html.Raw(后台数据库取的值); 或者MvcHtmlString.create();
- Spirit带你了解如何安全引入第三方资源
Spirit带你了解如何安全的引入第三方资源 本文介绍一下如何安全的引入第三方资源 同源策略(SOP) 首先我们来了解一下什么是同源策略,下面的是wiki百科的定义 同源策略是指Web浏览器中,允许某 ...
- 如何使用css来让图片居中不变形 微信小程序和web端适用
图片变形很多人祭奠出了妖魔鬼怪般的各种大法,比如使用jq来写,或者使用css表达式来写.今天我总结的是使用css3来写,唯一最大缺点就是对一些浏览器版本不够兼容.下面就是关于如何使用css来让图片居中 ...
- Js配合CSS实现的图片居中
CSS图上居中很好实现,但万恶的浏览器之间各不相让,搞的不兼容,还好我们有让其兼容的办法,那就是结合JS来实现,这样各个浏览器都听话多了.本例就是CSS结合JavaScript实现的图片垂直.水平方向 ...
- CSS布局之--各种居中
居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明 ...
- 讨论CSS中的各类居中方式
今天主要谈一谈CSS中的各种居中的办法. 首先是水平居中,最简单的办法当然就是 margin:0 auto; 也就是将margin-left和margin-right属性设置为auto,从而达到水平居 ...
- HTML CSS 中DIV内容居中汇总
转载博客(http://www.cnblogs.com/dearxinli/p/3865099.html) (备注:DIV居中情况,网上谈到也比较多,但是这篇文字,相对还是挺全面,现转载,如果冒犯,还 ...
- CSS 控制元素 上下左右居中
不说废话,直接 搞起..... 首先,我们将题目 <css控制元素上下左右居中> 分析一下哈,我是将其分成了4部分信息: 1.CSS控制: 只用 CSS 来达成目的 2.元素: 不只是d ...
随机推荐
- python关于多级包之间的引用问题
首先得明确包和模块. 包:在一个目录下存在__init__.py,那么该目录就是一个包. 模块:一个.py文件就是一个模块. 我们可以通过from 包 import 模块来引入python文件, 也可 ...
- 【文件格式探究】EP.1 对ePub文件格式的初探
这是"文件格式探究"专题的第 1 期--初探 "ePub" 文件格式.这个专题将会给各位读者呈现笔者探索各种文件格式的过程,具体则是文件的内容是如何呈现出来的. ...
- Python中用max()筛选出列表中出现次数最多的元素
1 List = [1,2,3,4,2,3,2] # 随意创建一个只有数字的列表 2 maxTimes = max(List,key=List.count) # maxTimes指列表中出现次数最多的 ...
- 备战秋招之十大排序——O(n)级排序算法
时间复杂度O(n)级排序算法 九.计数排序 前文说到,19591959 年 77 月,希尔排序通过交换非相邻元素,打破了 O(n^2)的魔咒,使得排序算法的时间复杂度降到了 O(nlog n) 级,此 ...
- 处理URLs
问题 你有一个包含相对URLs路径的HTML文档,需要将这些相对路径转换成绝对路径的URLs. 方法 在你解析文档时确保有指定base URI,然后 使用 abs: 属性前缀来取得包含base URI ...
- c++中的一些会用到的函数
1 #include<iostream> 2 #include<string> 3 using namespace std; 4 int main() { 5 string s ...
- Python也可以拥有延迟函数
延迟函数defer 我们知道在Golang中有一个关键字defer,用它来声明在函数调用前,会让函数*延迟**到外部函数退出时再执行,注意,这里的退出含义:函数return返回或者函数panic退出 ...
- 10分钟学会windows中iis搭建服务器集群实现负载均衡和nginx代理转发
前言 我们之前聊过 10分钟搭建服务器集群--Windows7系统中nginx与IIS服务器搭建集群实现负载均衡:https://www.cnblogs.com/xiongze520/p/103087 ...
- BUUCTF-[CISCN2019 总决赛 Day2 Web1]Easyweb
BUUCTF-[CISCN2019 总决赛 Day2 Web1]Easyweb 就给了一个这个... 先打上robots.txt看看 发现有源码备份,但不是index.php.bak... 看源码发现 ...
- （二）Superset 1.3图表篇——Time-series Table
(二)Superset 1.3图表篇--Time-series Table 本系列文章基于Superset 1.3.0版本.1.3.0版本目前支持分布,趋势,地理等等类型共59张图表.本次1.3版本的 ...