水平、垂直居中的若干种方法总结

原创 2016年06月02日 11:44:09

一、水平居中

水平居中的实现很简单,这儿就不赘述了。
行内元素使用:text-align:center 可以做到水平居中
块级元素使用:margin: 0 auto 可以做到水平居中

二、垂直居中

2.1 行内元素居中

单行的垂直居中可以通过设置元素line-height为父元素的高度,完成垂直居中

2.2 块级元素居中

  • 2.2.1 使用table-cell

    对父级元素设置display和vertical-align:

display:table-cell;
vertical-align: middle;
  • 2.2.2 已知元素宽高时,使用absolute和margin

    优点:兼容性好,是最常用的一种设置水平、垂直居中的方案
    缺点:需要知道元素宽高
    设置父元素为:

position: relative; //非static就行

设置子元素(假设宽高分别为500px,600px)的top和bottom:

position: relative;
top: 50%;
height: 50%;
margin-top: -300px; // 1/2的子元素高度
margin-left: -250px; // 1/2的子元素宽度
  • 2.2.3 未知宽高的元素居中,使用absolute和transform

优点:不需要知道元素高度、宽度就可以设置居中
缺点:由于transform属性是css3属性,IE9以下无法使用

父元素:

position: relative; //非static就行

子元素

position: absolute;
top:50%;
left: 50%;
transform:translate(-50%,-50%);
  • 2.2.4 绝对定位居中(Absolute Centering)

实现原理请参考freshlover的专栏

优点:支持跨浏览器,包括IE8-IE10;
缺点:必须声明高度(查看可变高度Variable Height);在Windows Phone设备上不起作用。

.Absolute-Center {  
  margin: auto;  
  position: absolute;  
  top: 0; left: 0; bottom: 0; right: 0;  
}  
  • 2.2.5 行内块元素

优点: 高度可变、内容溢出会将父元素撑开、 支持跨浏览器,也适应于IE7。

缺点:需要一个容器、水平居中依赖于margin-left: -0.25em;该尺寸对于不同的字体/字号需要调整、内容块宽度不能超过容器的100% - 0.25em。

父元素:

text-align: center;  
overflow: auto;  

子元素:

display: inline-block;  
vertical-align: middle;  

伪元素:

content: '';  
height: 100%;  
margin-left: -0.25em; /* To offset spacing. May vary by font */  

基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央。

CSS水平垂直居中常见方法总结

css元素水平垂直居中

【Web前端】CSS水平居中和垂直居中的方法总结

前言最近遇到一个 dt dd 在 div 中垂直居中的问题,找到答案后,对所有的居中方法做一个总结。水平居中 设置元素为文本或者图片等行内元素时,可以通过text-align:center; 实现。 ...
  • gyjyywc
  • gyjyywc
  • 2017年03月18日 09:51
  • 508

水平居中&垂直居中常用方法总结

PS:本文是对本博客中转载的《垂直和水平居中方法小结》的删减及部分改动,均有实例展示 1 水平居中方法 1.1 文字的水平居中 代码: 水平居中 .box{ backgrou...

图片垂直水平居中的N种方法

div内容水平垂直居中解决方案

未知高度的div在父元素中水平垂直居中的方法

居中方法暂时找到两种: 1、父元素: 在父元素中使用: display: flex; justify-content: center; align-items: center; 这些属性,即可...

div水平垂直居中问题以及解决方法的兼容性

Ⅰ.绝对定位居中(Absolute Centering)技术 我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中……实际上,实现垂直居中...
  • cyyax
  • cyyax
  • 2016年04月28日 10:18
  • 648

未知宽高div水平垂直居中3种方法

未知宽高div水平垂直居中3种方法:1、transform与绝对定位方式。2、Flexbox方式。3、伪类方式...
  • rongku
  • rongku
  • 2014年10月25日 13:46
  • 5361

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

http://www.cnblogs.com/cme-kai/p/6192544.html ********************************************* 直接进入...

垂直和水平居中方法小结

水平居中行内元素text-align:center;块元素1.定宽块元素水平居中 margin:0 auto;2.不定宽块元素水平居中方法一:利用浮动的包裹性和百分比相对定位 我们想要使inn...

用css实现垂直水平居中的几种方法

1.用line-block和vertical-align来实现居中:这种方法适合于未知宽度高度的情况下。 Title #container{ ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:水平、垂直居中的若干种方法总结
举报原因:
原因补充:

(最多只允许输入30个字)