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
   
   
   
 

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

1.用line-block和vertical-align来实现居中:这种方法适合于未知宽度高度的情况下。 Title #container{ ...

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

css元素水平垂直居中

CSS使元素水平垂直居中的方法

1、使用绝对定位(position)和外边距(margin)       适用范围:子级元素(content)宽高固定       方法:(1)将父级 (box)设置成相对定位(relative);(...

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

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

收罗CSS布局中有关水平和垂直居中的N种方法

先来说说水平居中。  CSS水平居中的方法:  1、最常见的margin方法:  给元素设置一个显示式的宽度,然后加上margin的左右值为auto,示例:  复制代码...

使用纯CSS实现未知尺寸的图片(但高宽都小于500px)在500px的正方形容器中水平和垂直居中。你有几种方法?

解决这个问题有多种方法 1.使用css hack 处理ie6下的问题。 2.嵌入其它标签使其垂直居中。 方法一:  .box {             /*非IE的主流浏览器识别的...

CSS实现元素水平/垂直居中的方法

首先,我们来了解水平居中,它有很多种方法,我们暂时先来了解其中的几种: 1.    在实现方案中,我们最熟悉的莫过于给元素定义一个宽度,然后使用margin: body{     width:...

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

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

html中div如何水平和垂直居中的几种css方法代码

一、记录下几种盒子居中的方法: 1、margin固定宽高居中; 2、负margin居中; 3、绝对定位居中; 4、table-cell居中; 5、flex居中; 6、transform居中...

css中已知宽高的子元素水平垂直居中的三种方法

css中子元素水平垂直居中三种的方法
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css 水平居中 垂直居中方法
举报原因:
原因补充:

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