水平垂直居中

  • 知道自身的宽度、高度
<div class="test"></div>
<style>
.test {
position: absolute;
height: 200px;
width: 200px;
left: 50%; /* 父级宽度的50% */
top: 50%; /* 父级高度的50% */
margin-left: -100px;
margin-top: -100px;
border: 1px solid #000000; /* 方便看效果 */
}
</style>

原理:先水平、垂直定位到父级的中间(父级宽度和高度的一半),再向左、上平移自身宽度、高度的一半,即可完成水平、垂直居中。

  • 不知道自身的宽度、高度
<div class="test"></div>
<style>
.test {
position: absolute;
height: 200px;
width: 200px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 1px solid #000000; /* 方便看效果 */
}
</style>

原理:同上一种方法一样,先水平、垂直定位到父级的中间(父级宽度和高度的一半),再向左、上平移自身宽度、高度的一半,而translate里面是自身的百分百,所以不需要知道自身的宽度。

【持续更新】CSS居中的更多相关文章

  1. (持续更新) CSS属性持续记录

    可以去除ul的li标签自带的圆点list-style-type: none; 可以将自己的光标改变样式:cursor: pointer;

  2. css面试题汇总 (持续更新)

    前言:这篇随笔是为了准备后面的面试而整理的,网上各种面试题太多了,但是我感觉很多太偏了,而且实际开发过程中并不会遇到,因此这里我整理一些比较常用的,或者是相对比较重要的知识点,每个知识点都会由浅入深, ...

  3. web前端面试题(持续更新)

    此文是我本人在面试的时候遇到的问题和一些同学遇到的问题加资料上面的问题的总结.(将会持续更新,因为未有满意工作) 面试时有几点需要注意: 1.面试题目:根据你的等级和职位的变化,入门级到大神级,广度和 ...

  4. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  5. BAT 前端开发面经 —— 吐血总结 前端相关片段整理——持续更新 前端基础精简总结 Web Storage You don't know js

    BAT 前端开发面经 —— 吐血总结   目录 1. Tencent 2. 阿里 3. 百度 更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘, ...

  6. 神技!微信小程序(应用号)抢先入门教程(附最新案例DEMO-豆瓣电影)持续更新

    微信小程序 Demo(豆瓣电影) 由于时间的关系,没有办法写一个完整的说明,后续配合一些视频资料,请持续关注 官方文档:https://mp.weixin.qq.com/debug/wxadoc/de ...

  7. 干货!IT小伙伴们实用的网站及工具大集合!持续更新!

    1.Git 还在担心自己辛辛苦苦写的代码被误删了吗?还在担心自己改错了代码不能挽回吗?还在苦恼于多人开发合作找不到一个好的工具吗?那么用Git就对 了,Git是一个开源的分布式版本控制系统,用以有效. ...

  8. java视频教程 Java自学视频整理(持续更新中...)

    视频教程,马士兵java视频教程,java视频 1.Java基础视频 <张孝祥JAVA视频教程>完整版[RMVB](东西网) 历经5年锤炼(史上最适合初学者入门的Java基础视频)(传智播 ...

  9. ( 译、持续更新 ) JavaScript 上分小技巧(一)

    感谢好友破狼提供的这篇好文章,也感谢写这些知识点的作者们和将他们整理到一起的作者.这是github上的一篇文章,在这里本兽也就只做翻译,由于本兽英语水平和编程能力都不咋地,如有不好的地方也请多理解体谅 ...

  10. 【持续更新】JavaScript常见面试题整理

    [重点提前说]这篇博客里的问题涉及到了了JS中常见的的基础知识点,也是面试中常见的一些问题,建议初入职场的园友Mark收藏,本文会持续更新~ 1. 引入JS的三种方式 1.在HTML标签中直接使用,直 ...

随机推荐

  1. linux命令学习笔记 : install 命令

    install .作用 install命令的作用是安装或升级软件或备份数据,它的使用权限是所有用户. .格式 ()install [选项]... 来源 目的地 ()install [选项]... 来源 ...

  2. [ZJOI 2012] 网络

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2816 [算法] 对每种颜色的边建一棵LCT , 维护联通性即可 时间复杂度 : O( ...

  3. Winform中ComBox大小设置

    combox,listview等一些控件的外观会由于字体大小的改变而改变.修改字体的大小宽度自动变化

  4. disablescroll

    页面的设置 disablescroll:true(需要配合设置 enablePullDownRefresh:false ) 可以实现页面上下不能滑动 另一种实现方法: 设置页面的根元素 绝对定位, p ...

  5. C++ 预处理指令 #pragma

    http://www.cnblogs.com/qinfengxiaoyue/archive/2012/06/05/2535524.html

  6. 【Linux学习】Vi / Vim编辑器—编辑器工作模式、vi编辑操作

    Vi / Vim编辑器-编辑器工作模式.vi编辑操作 推荐一个很好的学习指南:http://www.oschina.net/translate/learn-vim-progressively 一.编辑 ...

  7. FileWriter 写文件

    FileWriter fw = new FileWriter("C://Users//pc//Desktop//aaa.txt",true); fw.write("201 ...

  8. Java的多线程创建方法

    1. 直接使用Thread来创建 package com.test.tt; public class ThreadEx extends Thread{ private int j; public vo ...

  9. Solve Tree Problems Recursively

    "Top-down" Solution Here is the pseudocode for the recursion function maximum_depth(root, ...

  10. Codeforces 174B【模拟构造】

    题意: 给你一个串只有小写字母和点,让你构造前缀是1-8,后缀是1-3长度的文件名: 思路: 那么以"."作为分割点,把字符串都拿出来,然后 首段长度<=8 OK; 中间&l ...