水平居中

对于已知宽度的块级元素实现水平居中只需要设置

margin-left:auto;
margin-right:auto;

对于多个块级元素实现水平居中只需要设置

//1
父类{
text-align:center;
}
块级元素{
display:inline-block;
} //2
父类{
display:flex;(flex布局兼容性问题)
justify-content:center;
}

对于未知宽度的块级元素实现水平居中

position:absolute;
left:50%;
transform:translateX(-50%);//若宽度w已知,可采用margin-left:-w/2px方式,两者实现结果一样

垂直居中

多行的行内元素垂直居中

display:table-cell;
vertical-align:middle;

已知高度的块级元素垂直居中

position:absolute;
top:50%;
margin-top:-h/2px;(已知高度一半)

未知高度的块级元素垂直居中

position:absolute;
top:50%;
transform:translateY(-50%);
display:flex;
justify-content:center;
align-items:center;

网上看到相关的教程,自己整合记录下来,方便自己后面查看

css实现页面元素居中的更多相关文章

  1. 用 CSS 隐藏页面元素

    用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0 将 visibility 设为 hidden 将 display 设为 none 将 position 设为 absolute ...

  2. 用 CSS 隐藏页面元素的 5 种方法

    原文链接:用 CSS 隐藏页面元素的 5 种方法,转载请注明来源! 用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0.将 visibility 设为 hidden.将 disp ...

  3. CSS 隐藏页面元素的 几 种方法总结

    用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0.将 visibility 设为 hidden.将 display 设为 none 或者将 position 设为 absolu ...

  4. css隐藏页面元素的方法

    用css隐藏页面元素有许多种方法. 第一种方法[opacity: 0;] opacity属性通常用于设置一个元素的透明度,从另一个角度来看,如果透明度为0,也就从视觉上隐藏了该元素. 这个属性不是为改 ...

  5. css浮动的元素居中

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. css隐藏页面元素的多种方法

    在平常的样式排版中,我们经常遇到将某个模块隐藏,下面我整理了一下隐藏元素的多种方法以及对比(有的占据空间,有的不占据空间.有的可以点击,有的不能点击.): ( 一 )  display:  none; ...

  7. css实现绝对定位元素居中

    前端我们时常需要封装一些弹出框,这些弹出框大小都不能确定,多半是用js实现居中. 现在有了css3可以不用js了. .box{ background-color: blueviolet; width: ...

  8. 用CSS隐藏页面元素的5种方法

    1.opacity设置一个元素的透明度只是从视觉上隐藏元素,对页面布局还是有影响,读屏软件会原样读出 2.visibility设置为hidden将隐藏我们的元素,对网页布局还是起作用,子元素也会被隐藏 ...

  9. 【CSS】定位元素居中显示

    1.利用margin div { width: 100px; height: 100px; background-color: skyblue; position: absolute; top: 50 ...

随机推荐

  1. 简单编写Makefile

    相信很多朋友都有过这样的经历,看着开源项目中好几页的makefile文件,不知所云.在日常学习和工作中,也有意无意的去回避makefile,能改就不写,能用ide就用ide.其实makefile并没有 ...

  2. JavaScript资源大全中文版(Awesome最新版)

    Awesome系列的JavaScript资源整理.awesome-javascript是sorrycc发起维护的 JS 资源列表,内容包括:包管理器.加载器.测试框架.运行器.QA.MVC框架和库.模 ...

  3. YYModel 源码解读(一)之YYModel.h

    #if __has_include(<YYModel/YYModel.h>) FOUNDATION_EXPORT double YYModelVersionNumber; FOUNDATI ...

  4. 【分布式】Zookeeper的Leader选举

    一.前言 前面学习了Zookeeper服务端的相关细节,其中对于集群启动而言,很重要的一部分就是Leader选举,接着就开始深入学习Leader选举. 二.Leader选举 2.1 Leader选举概 ...

  5. PHP用单例模式实现一个数据库类

    使用单例模式的出发点: 1.php的应用主要在于数据库应用, 所以一个应用中会存在大量的数据库操作, 使用单例模式, 则可以避免大量的new 操作消耗的资源. 2.如果系统中需要有一个类来全局控制某些 ...

  6. Windows下Memcached安装与配置实例

    环境声明: 服务器: Windows Server 2008r2: Memcached: Memcached 64-bit for Windows(64位) From: http://www.urie ...

  7. dicom网络通讯入门(2)

    第二篇,前面都是闲扯 其实正文现在才开始,这次是把压箱底的东西都拿出来了. 首先我们今天要干的事是实现一个echo响应测试工具 也就是echo 的scu,不是实现打印作业管理么.同学我告诉你还早着呢. ...

  8. C#-#define条件编译

    本文导读: C#的预处理器指令从来不会转化为可执行代码的命令,但是会影响编译过程的各个方面,常用的预处理器指令有#define.#undef.#if,#elif,#else和#endif等等,下面介绍 ...

  9. 在DevExpress程序中使用SplashScreenManager控件实现启动闪屏和等待信息窗口

    在我很早的WInform随笔<WinForm界面开发之"SplashScreen控件">有介绍如何使用闪屏的处理操作,不过那种是普通WInform和DevExpress ...

  10. ASP.NET Core WebListener 服务器

    原文地址:WebListener server for ASP.NET Core By Tom Dykstra, Chris Ross WebListener是一个只能运行在Windows上的ASP. ...