前端三部曲之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 ...
随机推荐
- 九 Django框架，Form表单验证
表单提交 html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- c#基础综述
一个相关的博客:http://blog.csdn.net/zhang_xinxiu/article/details/8605980 很好的一个网站:http://www.runoob.com/
- Vue2.0 Transition常见用法全解惑
Vue2.0的过渡系统(transition)有了很大的改变,想把1.0的项目迁移到2.0,着实需要费一些功夫,今天我就要把vue2.0的过渡系统的用法搞清楚,因为之前确实踩了不少坑.这里只涉及单元素 ...
- 如何在MySQL中查询当前数据上一条和下一条的记录
如果ID是主键或者有索引,可以直接查找: 方法一: 查询上一条记录的SQL语句(如果有其他的查询条件记得加上other_conditions以免出现不必要的错误): select * from tab ...
- hdu-5653 Bomber Man wants to bomb an Array.(区间dp)
题目链接: Bomber Man wants to bomb an Array. Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65 ...
- perl: warning: Falling back to the standard locale ("C").
/********************************************************************************** * perl: warning: ...
- 2017.10.6北京清北综合强化班DAY6
题目大意:改变一个数的位置 把一个序列变成不下降序列 题解: 设置一个pre,如果破坏单调性,就把‘删除’这个.否则把pre修改为当前元素的值. 考试时这样得了90分,是因为我的做法只能过这样的数据 ...
- RabbitMQ队列，Redis\Memcached缓存
RabbitMQ RabbitMQ是一个在AMQP基础上完整的,可复用的企业消息系统. MQ全称Message Queue,消息队列(MQ)是一种应用程序对应用程序的通信方式.应用程序通过读写出入队列 ...
- requests 的使用
1.1.实例引入 # 引入Requests库 import requests # 发起GET请求 response = requests.get('https://www.baidu.com/') ...
- 微服务理论之五：微服务架构 vs. SOA架构
一.面向服务的架构SOA 面向服务的架构是一种软件体系结构,应用程序的不同组件通过网络上的通信协议向其他组件提供服务.通信可以是简单的数据传递,也可以是两个或多个服务彼此协调连接.这些独特的服务执行一 ...