css实现页面元素居中
水平居中
对于已知宽度的块级元素实现水平居中只需要设置
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实现页面元素居中的更多相关文章
- 用 CSS 隐藏页面元素
用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0 将 visibility 设为 hidden 将 display 设为 none 将 position 设为 absolute ...
- 用 CSS 隐藏页面元素的 5 种方法
原文链接:用 CSS 隐藏页面元素的 5 种方法,转载请注明来源! 用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0.将 visibility 设为 hidden.将 disp ...
- CSS 隐藏页面元素的 几 种方法总结
用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0.将 visibility 设为 hidden.将 display 设为 none 或者将 position 设为 absolu ...
- css隐藏页面元素的方法
用css隐藏页面元素有许多种方法. 第一种方法[opacity: 0;] opacity属性通常用于设置一个元素的透明度,从另一个角度来看,如果透明度为0,也就从视觉上隐藏了该元素. 这个属性不是为改 ...
- css浮动的元素居中
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- css隐藏页面元素的多种方法
在平常的样式排版中,我们经常遇到将某个模块隐藏,下面我整理了一下隐藏元素的多种方法以及对比(有的占据空间,有的不占据空间.有的可以点击,有的不能点击.): ( 一 ) display: none; ...
- css实现绝对定位元素居中
前端我们时常需要封装一些弹出框,这些弹出框大小都不能确定,多半是用js实现居中. 现在有了css3可以不用js了. .box{ background-color: blueviolet; width: ...
- 用CSS隐藏页面元素的5种方法
1.opacity设置一个元素的透明度只是从视觉上隐藏元素,对页面布局还是有影响,读屏软件会原样读出 2.visibility设置为hidden将隐藏我们的元素,对网页布局还是起作用,子元素也会被隐藏 ...
- 【CSS】定位元素居中显示
1.利用margin div { width: 100px; height: 100px; background-color: skyblue; position: absolute; top: 50 ...
随机推荐
- 原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...
- JQuery中ajax的相关方法总结
前提条件 话说是jquery中的ajax方法,那么前提条件当然是引入jquery啦. <script src="http://libs.baidu.com/jquery/1.9.0/j ...
- Vertica数据库常用管理命令汇总
1.查询数据库是否有等待 select * from resource_queues where node_name=(select node_name from nodes order by nod ...
- jquery dataTable汉化(插件形式)
1.jquery dataTable.js 官网:http://datatables.net/ 中文:http://dt.thxopen.com/ 2.汉化提示信息(放到xx.js中,引入即可) 注: ...
- C#基础回顾(一)—C#访问修饰符
一.写在前面的话 好久没有停下来总结自己,转眼间15年过去好些天,回首过去的日子,亦或失去,亦或所得!生活的节奏,常常让我们带着急急忙忙的节奏去追赶,也许这并不是每个人所期望的生活方式!于他人,于自己 ...
- 用github来展示你的前端页面吧
前言 经常会有人问我如何才能将自己做的静态页面放到网上供他人欣赏,是不是需要自己有一个服务器,是不是还要搞个域名才能访问?对于以上问题我都会回答:用github来展示你的前端页面吧. 工欲善其事,必先 ...
- 第三篇 Entity Framework Plus 之 Query Cache
离上一篇博客,快一周,工作太忙,只能利用休息日来写一些跟大家分享,Entity Framework Plus 组件系列文章,之前已经写过两篇 第一篇 Entity Framework Plus 之 A ...
- 脚本化CSS类-HTML5 classList属性
HTML元素可以有多个CSS类名,class属性保存了一个用空格隔开的类名列表.标识符class在JavaScript中是保留字,所以在JavaScript中可以用className. //如下代码设 ...
- PHP跨域form提交
因为安全性因素,直接跨域访问是不被允许的. 1.PHP CURL方式 function curlPost($url,$params) { $postData = ''; foreach($params ...
- win10 下visual studio 2015 在调试模式下不能跟踪源文件
win10 下visual studio 2015 在调试模式下不能跟踪源文件,只要一调试就会关闭(隐藏)打开的文档,非常不方便.经过一番折腾,发现是配置的问题. 如果安装多个版本的VS,请删除对应版 ...