我们在实际工作中经常会遇到需要水平居中或者垂直居中的场景,今天我们就来看一下如何设置水平居中和垂直居中。
首先来看水平居中。
一、水平居中设置-行内元素。
如果被设置元素为文本。图片等行内元素时,水平居中是通过给父元素设置text-align:center来实现的。
二、水平居中设置-定宽块状元素。
当被设置元素为块状元素时用text-align:center就不起作用了,这时也分两种情况:定宽块状元素和不定宽块状元素。我们先来讲一讲定宽块状元素。
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。
三、水平居中总结-不定宽块状元素方法(一)
在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中,比如网页上的分页导航,因为分页的数量是不确定的,所以我们不能通过设置宽度来限制它的弹性。
不定宽度的块状元素有三种方法居中(这三种方法目前使用的都比多):
1、加入 table 标签

不定宽块状元素水平居中

table{
margin:0 auto;
}
/下面是任务区代码/
.wrap{
background:#ccc;
}

设置我所在的div容器水平居中

设置 display;inline 方法:改变块级元素的 display 为 inline 类型,然后使用 text-align:center 来实现居中效果
设置 position:relative 和 left:50%;
通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left:-50% 来实现水平居中。

不定宽块状元素水平居中

.container{
float:left;
position:relative;
left:50%
}

.wrap{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}

.wrap-center{
background:#ccc;

}

我们来学习一下这种方法。

垂直居中-父元素高度确定的单行文本
一、父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。
垂直居中-父元素高度确定的多行文本(方法一)
使用插入 table (包括tbody、tr、td)标签,同时设置 vertical-align:middle。
说到竖直居中,css 中有一个用于竖直居中的属性 vertical-align,但这个样式只有在父元素为 td 或 th 时,才会生效。因为 td 标签默认情况下就默认设置了 vertical-align 为 middle,所以我们不需要显式地设置了。

父元素高度确定的多行文本

.wrap{height:400px;background:#ccc}

垂直居中-父元素高度确定的多行文本(方法二)
在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell,激活 vertical-align 属性,但注意 IE6、7 并不支持这个样式。

父元素高度确定的多行文本

.container{
height:300px;
background:#ccc;

display:table-cell;
vertical-align:middle;/IE8以上及Chrome、Firefox/
}

CSS水平、垂直居中小结的更多相关文章

  1. CSS水平垂直居中总结

    行内元素水平居中 把行内元素包裹在块级父元素中,且父元素中的css设置text-align:center; <!DOCTYPE html> <html> <head> ...

  2. css水平垂直居中对齐方式

    1.文字或者内联元素的垂直水平居中对齐 css属性 -- 水平居中:text-aligin:center; 垂直居中: line-height:height; 例子:. html: <div c ...

  3. 把简单做好也不简单-css水平垂直居中

    44年前我们把人送上月球,但在CSS中我们仍然不能很好实现水平垂直居中. 作者:Icarus 原文链接:http://xdlrt.github.io/2016/12/15/2016-12-15 水平垂 ...

  4. CSS水平垂直居中的方法

    原文链接:http://caibaojian.com/370.html 水平垂直居中,特别是使用在列表的时候经常会用到的,以前有需求的时候我也做过类似的代码,是使用display:table-cell ...

  5. css 水平垂直居中总结

    空闲总结了下水平垂直居中方案,欢迎补充: 水平居中 水平居中有两种情况: 子元素是内联元素 这种那个情况下只需要在父元素定义: text-align:center; 例子: html: //省略了bo ...

  6. CSS水平垂直居中的几种方法2

    直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...

  7. CSS水平垂直居中的几种方法

    直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...

  8. 常见的几种 CSS 水平垂直居中解决办法

    用CSS实现元素的水平居中,比较简单,可以设置text-align center,或者设置 margin-left:auto; margin-right:auto 之类的即可. 主要麻烦的地方还是在垂 ...

  9. 介绍一种css水平垂直居中的方法(非常好用!)

    这次介绍一下一个水平垂直居中的css方法,这个方法可以说是百试百灵,废话不多说,直接附上代码: html,body{ width:100%; height:100%; } 你需要居中的元素{ posi ...

  10. css水平垂直居中

    margin法(水平居中) 需要满足三个条件: 元素定宽 元素为块级元素或行内元素设置display:block 元素的margin-left和margin-right都必须设置为auto 三个条件缺 ...

随机推荐

  1. 几本关于PHP安全的书

    几本关于PHP安全的书: Essential PHP Security php architect‘s Guide to PHP Security Pro PHP Security Securing ...

  2. 如何让PHP支持Redis

    原理:php默认扩展库不含有redis扩展:要支持redis扩展,需要有redis.so这个扩展文件 所以我们的目标就是生成redis.so扩展文件,并修改php.ini 让其支持redis扩展. 准 ...

  3. 深入理解计算机系统第二版习题解答CSAPP 2.18

    将32位补码表示的数转换为10进制数. 32位补码 十进制 0x1b8 0x14 0xFFFFFE58 -424 0xFFFFFE74 -396 0x44 0xFFFFFEC8 -312 0x10 0 ...

  4. 关于Git的merge和rebase命令解析

    git rebase是对提交执行变基的操作.即可以实现将指定范围的提交"嫁接"到另外一个提交智商. 其常用的命令格式有: 用法1:git rebase --onto <new ...

  5. nodejs错误:ld: library not found for -lgcc_s.10.5 clang: error: linker command failed with exit code 1 (use -v to see invocation)

    解决方案: $ cd /usr/local/lib $ sudo ln -s ../../lib/libSystem.B.dylib libgcc_s.10.5.dylib 参考链接

  6. 为什么margin-top不是作用于父元素

    为什么margin-top不是作用于父元素:建议:尽可能的手写代码,可以有效的提高学习效率和深度.至于margin-top属性的基本用法再简单不过,那就是设置一个对象的上外边距,看下面的代码实例: & ...

  7. GestureDetector类及其用法

    转载子:http://www.cnblogs.com/rayray/p/3422734.html 项目中有需求:针对一个imageview,点击需要查看大图,左右滑动能执行翻页. 自己对手势这一块并不 ...

  8. .net 文件操作

    一.DotNet文件目录常用操作: DiveInfo:提供了对逻辑磁盘的基本信息访问的途径.(只能查看信息,不能做任何修改.) System.Environment:用来枚举驱动器.(不能获取驱动器的 ...

  9. 给String添加reverse方法

    我们知道Array有个reverse方法,String则没有,但可以Array来实现,字符串有个split方法可以轻易的将String转换为Array. String.prototype.revers ...

  10. Centos7安装并配置mysql5.6完美教程

    Centos7安装并配置mysql5.6完美教程 Centos7将默认数据库mysql替换成了Mariadb,对于我们这些还想使用mysql的开发人员来说并不是一个好消息.然而,网上关于Linux安装 ...