css 水平居中 垂直居中方法

原创 2015年07月09日 16:52:18
div 水平居中的方法:
1) width + auto; 

   div{width:200px;margin: 0 auto;} 宽度和auto必须同时存在。
2) 借助table; 
html: <table><tr><td><ul><li>1</li><li>2</li></ul></td></tr></table>  
css: table{margin:0 auto;}   
3) inline + text-algin:center;
html:<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
css: .container{text-algin:center;} 
    .container ul{display:inline;}
.container li{display:inline;}
4)  float+postion+left;
html:<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
css: .container{
float:left;
position:relative;
left:50%
}
.container ul{
position:relative;
left:-50%;
}


div 高度居中:
1)借助table;
    html:
<body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>   
    css:table td{height:500px;background:#ccc;vertical-align:middle;}

2)table-cell; 
   css:
{display:table-cell;vertical-align:middle;}不兼容ie6  ie7
   
   
   
 

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

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

css(css3)实现垂直水平居中的那些事

都说“金三银四求职季”,本人也选择了在这个时候成为这浩浩荡荡的求职大军中的一员,几次面试下来,发现面试官都爱问的一个问题就是:“说说垂直水平居中都有哪些实现方式吧?”       面试过程巴拉巴拉一...
  • u014516981
  • u014516981
  • 2017年03月03日 20:10
  • 903

CSS设置元素水平居中、垂直居中方式汇总

按照水平居中、垂直居中、行内元素、块级元素等条件进行组合获取效果水平居中:行内元素解决方案只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可:.par...
  • javaloveiphone
  • javaloveiphone
  • 2016年04月05日 16:01
  • 930

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

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

css 让div垂直水平居中,兼容ie6+

body { font-size:12px;font-family:tahoma;} #wrap { background-color:#FFCCFF; width:760px; heigh...
  • boys1999
  • boys1999
  • 2015年03月17日 22:53
  • 2030

经典面试题:如何让DIV水平和垂直居中

CSS让DIV水平居中 说明,本文中所指的DIV包括HTML页面中所有的元素。 让一个DIV水平居中,直接用CSS就可以做到。只要设置了DIV的宽度,然后使用margin设置边距0 auto,CS...
  • zxjiayou1314
  • zxjiayou1314
  • 2015年06月24日 21:36
  • 989

盘点8种CSS实现垂直居中水平居中的绝对定位居中技术

我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中……实际上,实现垂直居中仅需要声明元素高度和下面的CSS: .Absolute-Center { ...
  • freshlover
  • freshlover
  • 2013年09月11日 21:06
  • 327002

CSS里的各种水平垂直居中基础写法心得分享(附内联元素,块级元素的基本概念)

http://www.w3school.com.cn/htmldom/prop_style_verticalalign.asp(W3C标准,概念不清的看手册很重要哦)       首先,依旧是概念...
  • Jt1123
  • Jt1123
  • 2013年12月27日 09:26
  • 2091

CSS垂直水平居中,display:flex,布局,文字属性的一些零碎

body的height不可少,如body{height:100%},否则子元素会不认,如果子元素的高直接以百分比写的话,会不显示。因为识别不出来。 宽度则不会,因为浏览器的宽度是固定的,高度会滚,...
  • github_36487770
  • github_36487770
  • 2017年05月10日 11:36
  • 3556

水平居中与垂直居中的区别

水平居中:文字的左右两边的间距是一样的, 垂直居中:文字的上边和下边的间距是一样的。...
  • vshpper
  • vshpper
  • 2015年02月12日 10:28
  • 509
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css 水平居中 垂直居中方法
举报原因:
原因补充:

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