css居中的几种方式_html/css_WEB-ITnose
程序员文章站
2024-01-17 16:34:10
...
居中分水平和垂直两种,使用的频度也算是很高,下面分情况来讨论一下几种常用的实现方式。
欢迎指正文中的错误,同时如果有学习到新的方式也会更新在后面,也方便以后温故知新。
1.margin
这种方式只能实现固定宽度的块级元素水平居中,如果该元素没有设置宽度或者不是块级元素,则不会生效。
/*以div元素为例*/div{ width: 100px; height: 100px; margin: auto; /*或者margin: 0 auto;*/}
2.line-height
将单行文字line-height值设置为其父元素高度可以实现该行文字的垂直居中,局限也很明显。
文字内容
#container{ height: 30px;}#content{ line-height: 30px;}
3.表格
如果你使用表格的话,那么可以利用td元素的align:center和valign:middle属性轻易的做到水平和垂直居中,但是考虑到现在表格布局的使用频率已经很低了,实用性其实并不强。
4.display: table-cell
由于单元格可以轻易的实现水平和垂直居中,所以可以把父元素容器模拟成单元格元素,通过样式text-align:center以及vertical-align:middle来达到一样的效果。但是要注意的是text-align:center只能使非块级子元素水平居中而对块级子元素无效。
#table{ display: table-cell; width: 200px; height: 200px; vertical-align: middle; text-align: center;}
5.绝对定位居中
这个方法使用的相对也较多,但是需要子元素有固定的宽高,不多说直接上代码。
html,body{ width: 100%; height: 100%;}body{ position: relative;}body>div{ position: absolute; width: 100px; height: 100px; left: 50%; top: 50%; /*此时的元素并不是居中的,向右偏了一半的宽度,向下偏了一半的高度*/ /*所以要使用margin把元素拉回来*/ margin: -50px 0 0 -50px; }
上一篇: 记念文章上首页
推荐阅读
-
css居中的几种方式_html/css_WEB-ITnose
-
修改AFNetworking源文件可接收text/plain和text/html的方法_html/css_WEB-ITnose
-
div+css布局时的浏览器兼容问题_html/css_WEB-ITnose
-
[翻译]CSS模块-未来的编码方式_html/css_WEB-ITnose
-
一个已经完成的PC网站,如何快速改造,让它能适应平板、手机等不同分辨率?_html/css_WEB-ITnose
-
CSS3的calc()用法简单介绍_html/css_WEB-ITnose
-
iframe里面引用的第三方的链接地址,现在想实现点击之后再iframe里面显示_html/css_WEB-ITnose
-
根据一个旅游网站的psd素材还原的静态页面_html/css_WEB-ITnose
-
想把一个DIV放到一个大DIV的右下角该怎么办?该大DIV包含两个并列的DIV_html/css_WEB-ITnose
-
html select 中的 option 下拉列表的宽度, IE8中不能自动适应宽度, 如何简单解决?_html/css_WEB-ITnose