前端三部曲之Css-- 1（常见的居中方式）
下面来介绍一下web端页面最常见的居中方式
页面的基本结构：一个简单的div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
:root , html{
height: 100%;
width: 100%;
}
div{
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div class="mid"></div>
</body>
</html>
</html>
1.利用position
:root , html{
height: 100%;
width: 100%;
}
div{
width: 100px;
height: 100px;
background: red;
}
.mid{
position: absolute;
top: 50%;
left: 50%;
/* 通过top 50% 和 left 50% 让div的左顶点居中 */
}
几种让div自身平移一半的方法
1.对于已知宽高
通过margin平移自身大小的一半
.mid{
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top:-50px;
}
通过calc函数进行计算
.mid{
position: absolute;
top:calc(50% - 50px);
left:calc(50% - 50px);
}
通过transform中的translate
.mid{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
2.利用flex弹性盒模型
body{
width: 100%;
height:100%;
display: flex;
align-items:center;
justify-content: center;
}
3.利用margin:auto 加position 四个方向为0
四个方向设置为0，用
.mid{
position: absolute;
margin:auto;
left:;
top:;
bottom:;
right:;
}
4.利用table table-cell
利用table-cell可以使用vertical-align: middle实现垂直居中
再在其子元素里用margin实现垂直居中即可
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
:root,
html {
height: 100%;
width: 100%;
}
body {
width: 100%;
height: 100%;
display: table;
}
.wrapper {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
.mid {
margin:0 auto;
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="mid">
</div>
</div>
</body>
</html>
让文字在块级元素内水平垂直居中
<div class="mid">123</div>
.mid{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
background: red;
}
垂直水平居中的方式就分享到这里。单独的垂直或者水平居中原理相同只要分开了用即可
以上就是常用的居中方式，最经常使用到的就是用盒模型的margin和flex弹性盒子来进行居中
也推荐使用这两种方式。
如果有任何的疑问欢迎一起交流讨论，后续如果还有什么其他的居中方式也会及时补充。
前端三部曲之Css-- 1（常见的居中方式）的更多相关文章
- 讨论CSS中的各类居中方式
今天主要谈一谈CSS中的各种居中的办法. 首先是水平居中,最简单的办法当然就是 margin:0 auto; 也就是将margin-left和margin-right属性设置为auto,从而达到水平居 ...
- css中两种居中方式text-align:center和margin:0 auto 的使用场景
关于使用text-align:center和margin:0 auto 两种居中方式的比较 前言:最近由于要学习后端,需要提前学习一部分前端知识,补了补css知识,发现狂神在讲这一部分讲的不是特别清楚 ...
- css水平竖直居中方式
CSS水平和垂直居中的几种实现方法: 1.单行垂直居中 文字在层中垂直居中vertical-align 属性是做不到的.我们这里有个比较巧妙的方法就是:设置height的高度与line-height的 ...
- 各种div+css居中方式调整（转载）
盘点8种CSS实现垂直居中水平居中的绝对定位居中技术 分类: 前端开发2013-09-11 21:06 24959人阅读 评论(3) 收藏 举报 绝对居中垂直居中水平居中CSS居中代码 目录(?) ...
- web前端-----第二弹CSS
web前端之CSS样式 CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. ''' selector { property: value; property: value; ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位（position）z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- Web前端篇：CSS常用格式化排版、盒模型、浮动、定位、背景边框属性
目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...
- 前端常用得CSS代码分享
前端常用得CSS代码分享 本文首发于公众号:小夭同学,同步更新个人博客:故事影片,转载请署名.代码不断更新中!! 1,垂直居中对齐 .vc { position: absolute; top: 50% ...
- 前端第二篇---前端基础之CSS
前端第二篇---前端基础之CSS 目录 一.css介绍 二.css语法 三.css的几种引入方式 四.css选择器 五.css属性相关 六.盒子模型 拓展 一.css介绍 CSS(Cascading ...
随机推荐
- Compilation error 未完待续
1. code.cpp:1:21: fatal error: iostream : No such file or directory #include< iostream > ^ com ...
- mySQL 5.7版 解决密码登录失败Access denied for user 'root'@'localhost' (us
mySQL 5.7版 解决密码登录失败Access denied for user 'root'@'localhost' (us 2016-03-05 ...
- python生成excel格式座位表
脚本分两个文件: 1.生成二维随机列表:GenerateLocaltion.py 2.将列表导入excel文件:CreateExcel.py 先上GenerateLocaltion.py: impor ...
- ATL和vc++中的智能指针（分别是CComPtr和_com_ptr_t）
一.智能指针的概念 智能指针是一个类,不是指针,智能指针在所包含的指针不再被使用时候会自动释放该所包含指针所占用的系统资源,而不用手动释放. 原理:智能指针封装了包含指针的AddRef()函数和Rel ...
- hdu-5584 LCM Walk(数论)
题目链接:LCM Walk Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)To ...
- C++中函数重载
C++中函数重载使用顶层const修饰参数和不使用const修饰参数效果是一样的,如果定义了这样的重载函数会报函数重定义的错误. 追其原因,C++中的函数传递方式有三种,一种是值传递,就是拷贝,一种是 ...
- ACM学习历程—ZOJ3777 Problem Arrangement（递推 && 状压）
Description The 11th Zhejiang Provincial Collegiate Programming Contest is coming! As a problem sett ...
- unity中mesh属性的uv坐标讨论
http://blog.sina.com.cn/s/blog_427cf00b0102vp0j.html 之前在做连连看游戏中,也用到贴图坐标,当时我们讲到,不管是平铺(Tiling)还是偏移(Off ...
- CF 1036B Diagonal Walking v.2——思路
题目:http://codeforces.com/contest/1036/problem/B 比赛时只能想出不合法的情况还有走到终点附近的方式. 设n<m,不合法就是m<k.走到终点方式 ...
- 修改MySQL的时区，涉及参数time_zone (转）
首先需要查看mysql的当前时区,用time_zone参数 mysql> show variables like '%time_zone%'; +------------------+----- ...