前端三部曲之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 ...
随机推荐
- python代码docstring生成文档之sphinx
在使用python中,我们一般在模块,类,函数下使用docstring添加字符串说明性文档,使开发人员更好的可以看懂此代码是做什么用的.然而写了那么多的注释,我们想要一篇文档怎么办,第一种办法不可能将 ...
- cpu满问题分析
功能问题,通过日志,单步调试相对比较好定位. 性能问题,例如线上服务器CPU100%,如何找到相关服务,如何定位问题代码,更考验技术人的功底. 做为开发人员,肯定会遇到这类问题,介绍一下分析CPU 1 ...
- Selenium-几种等待方式
强制等待 一直使用的time.sleep(5),可以放在任意地方,不好的地方,不太准确确定时间 隐形等待 driver.implicitly_wait(5) 设置了一个最长等待时间,如果在规定时间内网 ...
- 第一章 走进Python
目标 了解Python的历史 了解Python的特征 了解Python的应用 掌握Linux下Python开发环境的搭建 理解Windows下Python环境搭建 案例 安装Python,写出第一个P ...
- Java IO 简记
1.File 类: l java.io.File类:文件和目录路径名的抽象表示形式,与平台无关 l File 能新建.删除.重命名文件和目录,但 File 不能访问文件内容本身.如果需要访问文件内 ...
- Gym - 100570E：Palindrome Query （hash+BIT+二分维护回文串长度）
题意:给定字符串char[],以及Q个操作,操作有三种: 1:pos,chr:把pos位置的字符改为chr 2:pos:问以pos为中心的回文串长度为多长. 3:pos:问以pos,pos+1为中心的 ...
- [BZOJ1396&2865]识别子串
bzoj1396 bzoj2865 dbzoj1396 dbzoj2865 题面 XX在进行字符串研究的时候,遇到了一个十分棘手的问题. 在这个问题中,给定一个字符串\(S\),与一个整数\(K\), ...
- ACM学习历程—HDU5478 Can you find it（数论）（2015上海网赛11题）
Problem Description Given a prime number C(1≤C≤2×105), and three integers k1, b1, k2 (1≤k1,k2,b1≤109 ...
- [转]为什么GOF的23种设计模式里面没有MVC？
GoF (Gang of Four,四人组, <Design Patterns: Elements of Reusable Object-Oriented Software>/<设计 ...
- 类方法，实例方法，静态方法，@property的应用
class test(object): h = 'hello' w = 'world' def demo(self): print("demo") def test_class(s ...