如何用CSS水平、垂直居中

原创 2006年05月17日 11:50:00
1. 居中文本
要居中一个块级元素的文本,用text-align属性

程序代码 程序代码
h1, h2, h3 {

text-align:center;

}

另外一种方法就是使用margins来居中,这时文本要在它的容器里

程序代码 程序代码
h1, h2, h3 {

margin-left: auto;

margin-right: auto;

}

2. 居中表格
要居中一个表格,把表格作为一个div的子元素

程序代码 程序代码
<div class="center">

<table width="50%" border="1" cellpadding="30">

<tr>

<td>This is the first cell</td>

<td>This is the second cell</td>

</tr>

<tr>

<td>This is the third cell, it's under the first cell</td>

<td>This is the fourth cell, it's under the second cell.</td>

</tr>

</table>

</div>

添加以下规则

程序代码 程序代码
.center table {

margin: 0 auto;

text-align: left;

}

3. 居中图片
如果想要居中图片的话,在img外嵌套一个div元素

程序代码 程序代码
<div class="flagicon"><img src="flag.gif" alt="Flag " width="160 "

height="60" /></div>

添加以下规则

程序代码 程序代码
.flagicon {

text-align: center;

}

如果要想以固定宽度的值居中(例如图片),首先设置父元素的padding-left为50%,然后算一下要居中的图片宽度一半的值,把这个值的负数设置为图片的margin-left即可

程序代码 程序代码
<img src="wolf.jpg" width="256" height="192" alt="Photo of wolf.">

程序代码 程序代码
body {

padding-left: 50%;

}

img {

/* equal to the negative of half its width */

margin-left: -128px;

}

4.垂直居中
CSS里没有垂直居中,使用这条规则,可以使任何元素垂直居中

程序代码 程序代码
img {

position: absolute;

top: 50%;

left: 50%;

/* 元素高度一半的负数 */

margin-top: -96px;

/* 元素宽度一半的负数 */

margin-left: -128px;

height: 192px;

width: 256px;

}

如果想要同时垂直居中图片和文字,把图片和文字放到div里

程序代码 程序代码
<div id="centerFrame">

<p>Epsum factorial non deposit quid pro quo hic escorol. Olypian

quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus

carborundum e pluribus unum. Defacto lingo est igpay atinlay.</p>

<img src="wolf.jpg" width="256" height="192" alt="Photo of

wolf." />

</div>

去掉高度属性,自己调整margin-top并使其居中

程序代码 程序代码
#centerFrame {

position: absolute;

top: 50%;

left: 50%;

/* adjust negative value until content is centered */

margin-top: -150px;

margin-left: -138px;

width: 256px;

}

图片水平垂直居中css

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

CSS3实现水平垂直居中

水平垂直居中的制作大家都有碰到过,水平居中方法好处理,但是垂直居中的话还是让很多人头痛过,我也碰到很多盆友来询问如何让元素水平垂直居中。前面也专门讨论过如何让图片,单行文本和多行文本实现各种浏览器的水...

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

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

CSS里的各种水平垂直居中

CSS里的各种水平垂直居中 内联元素的特点: 1.     不占据一整行,随内容而定 2.     不可以设置宽高,也不可以设置行高,其宽度随内容增加,高度随字体改变 3.     可以设置内外边界...

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

css元素水平垂直居中

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

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

纯CSS完美实现垂直水平居中的6种方式

纯CSS完美实现垂直水平居中的6种方式 时间 2016-07-29 13:12:19 SegmentFault 原文  https://segmentfault.com/a/119...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:如何用CSS水平、垂直居中
举报原因:
原因补充:

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