水平居中and 垂直居中

原创 2016年08月28日 21:16:41

水平居中-行内设置

比如照片,文本之类的行内元素,可以在他们的父元素里设置 text-align:center来实现。

水平居中-定宽的块状元素

 display:block;
width:100px;
margin: 0 auto;

水平居中-不定宽的块状元素

方法一:加入table标签,因为table 标签是长度自适应的,相当于有了宽度,所以直接设置margin: 0 auto ; 
方法二:将子块状元素的display改为inline ,其父元素加上text-align:center;
**方法三:方法三:通过给父元素设置 float,然后给父元素设置 position:relative  left:50%,子元素设置 position:relative  left: -50% 来实现水平居中。

垂直居中-

父元素高度确定的单行文本,height=line-height,
为元素加上<table><tbody><tr><td>,<td>标签默认情况下就有vertical-align:middle ,我们不用再添加什么了
多行文本的display:table-cell;激活vertical-align属性;
将display设置为absolute 或者float:left;就可以设置width和height ,再设置height = line-height;






版权声明:本文为博主原创文章,未经博主允许不得转载。

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

1.用line-block和vertical-align来实现居中:这种方法适合于未知宽度高度的情况下。 Title #container{ ...
  • baidu_24024601
  • baidu_24024601
  • 2016年04月12日 11:01
  • 5965

用CSS/CSS3 实现 水平居中和垂直居中的完整攻略

水平居中:行内元素解决方案 只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可:   .parent { text-align:cente...
  • Summer_lover_
  • Summer_lover_
  • 2017年03月26日 21:05
  • 1913

如何让DIV水平和垂直居中三种方法

方法1 CSS实现水平和垂直居中要让DIV水平和垂直居中,必需知道该DIV得宽度和高度,然后设置位置为绝对位置,距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50...
  • summer7310
  • summer7310
  • 2015年09月27日 20:14
  • 2065

div+css文本水平垂直居中,兼容ie、谷歌等浏览器

  • 2012年12月06日 15:21
  • 2KB
  • 下载

图片水平垂直居中css

  • 2010年05月20日 15:19
  • 44KB
  • 下载

css实现一个容器的水平垂直居中-兼容所有的浏览器

  • 2016年10月09日 16:35
  • 5KB
  • 下载

窗口居中及水平与垂直流动条效果

  • 2002年10月07日 00:00
  • 13KB
  • 下载

未知大小的图片自适应水平垂直居中源码纯CSS

  • 2014年04月30日 10:04
  • 367B
  • 下载

div不定宽高的水平和垂直居中

  • 2015年01月09日 13:49
  • 4KB
  • 下载

js实现水平垂直居中

  • 2017年03月23日 16:28
  • 75KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:水平居中and 垂直居中
举报原因:
原因补充:

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