水平居中

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

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. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

  2. JQuery中ajax的相关方法总结

    前提条件 话说是jquery中的ajax方法,那么前提条件当然是引入jquery啦. <script src="http://libs.baidu.com/jquery/1.9.0/j ...

  3. Vertica数据库常用管理命令汇总

    1.查询数据库是否有等待 select * from resource_queues where node_name=(select node_name from nodes order by nod ...

  4. jquery dataTable汉化(插件形式)

    1.jquery dataTable.js 官网:http://datatables.net/ 中文:http://dt.thxopen.com/ 2.汉化提示信息(放到xx.js中,引入即可) 注: ...

  5. C#基础回顾(一)—C#访问修饰符

    一.写在前面的话 好久没有停下来总结自己,转眼间15年过去好些天,回首过去的日子,亦或失去,亦或所得!生活的节奏,常常让我们带着急急忙忙的节奏去追赶,也许这并不是每个人所期望的生活方式!于他人,于自己 ...

  6. 用github来展示你的前端页面吧

    前言 经常会有人问我如何才能将自己做的静态页面放到网上供他人欣赏,是不是需要自己有一个服务器,是不是还要搞个域名才能访问?对于以上问题我都会回答:用github来展示你的前端页面吧. 工欲善其事,必先 ...

  7. 第三篇 Entity Framework Plus 之 Query Cache

    离上一篇博客,快一周,工作太忙,只能利用休息日来写一些跟大家分享,Entity Framework Plus 组件系列文章,之前已经写过两篇 第一篇 Entity Framework Plus 之 A ...

  8. 脚本化CSS类-HTML5 classList属性

    HTML元素可以有多个CSS类名,class属性保存了一个用空格隔开的类名列表.标识符class在JavaScript中是保留字,所以在JavaScript中可以用className. //如下代码设 ...

  9. PHP跨域form提交

    因为安全性因素,直接跨域访问是不被允许的. 1.PHP CURL方式 function curlPost($url,$params) { $postData = ''; foreach($params ...

  10. win10 下visual studio 2015 在调试模式下不能跟踪源文件

    win10 下visual studio 2015 在调试模式下不能跟踪源文件,只要一调试就会关闭(隐藏)打开的文档,非常不方便.经过一番折腾,发现是配置的问题. 如果安装多个版本的VS,请删除对应版 ...