前端三部曲之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-unittest参数化
做接口测试的时候,同一个接口,输入的参数一样,参数值不一样,这时候,写多个case就是冗余的,就可以用参数化来实现,第三方模块有这个实现参数化的功能,安装pip install nose-param ...
- Tomcat_总结_02_单机多实例
一.tomcat下载及环境变量配置 1.tomcat下载 下载地址:tomcat官网 2.环境变量配置 只用配置一个CATALINA_HOME就可以了 二.CATALINA_HOME 与 CATALI ...
- Canvas drawImage
drawImage() 方法在画布上绘制图像.画布或视频. drawImage() 方法也能够绘制图像的某些部分,以及/或者增加或减少图像的尺寸. 这个方法有三张传参模式,3个参数,5个参数,9个参数 ...
- codeforces 612D The Union of k-Segments (线段排序)
D. The Union of k-Segments time limit per test 4 seconds memory limit per test 256 megabytes input s ...
- 判断CPU是大端还是小端
#include "stdafx.h" #include <iostream> using namespace std; /* #大端模式(Big_endian):字数 ...
- G 唐纳德与子串(easy)（华师网络赛---字符串，后缀数组）(丧心病狂的用后缀自动机A了一发Easy)
Time limit per test: 1.0 seconds Memory limit: 256 megabytes 子串的定义是在一个字符串中连续出现的一段字符.这里,我们使用 s[l…r] 来 ...
- ACM学习历程—HDU1695 GCD（容斥原理 || 莫比乌斯）
Description Given 5 integers: a, b, c, d, k, you're to find x in a...b, y in c...d that GCD(x, y) = ...
- nginx uwsgi wsgi django 这些东西究竟是什么关系
有太多的文章告诉我们nginx uwsgi django 这些东西怎么用了,太多的人知道这些东西的怎么使用,怎么配置,怎么优化,但是还是有一部分人比如我这种水货不知道这些东西到底是啥,为啥一个项目的发 ...
- 使用 Anthem.NET 框架的一个调试经历
简介:Anthem 是一个很好用的 Ajax 框架,支持 ASP.NET 1.1, 2.0.由于该框架的所有控件都继承自 ASP.NET 自身的服务器控件,保留了几乎所有这些控件的属性和行为(除了把它 ...
- js之__proto__原型链
可参考: http://blog.csdn.net/irelandken/article/details/7297490