Jquery中文网 www.jquerycn.cn
Jquery中文网 >  CSS教程  >  经典实例  >  正文 css实现垂直水平居中实例代码

css实现垂直水平居中实例代码

发布时间:2020-05-15   编辑:www.jquerycn.cn
jquery中文网为您提供css实现垂直水平居中实例代码等资源,欢迎您收藏本站,我们将为您提供最新的css实现垂直水平居中实例代码资源
在css中我们想让一个div实现水平居中还是需要一些技巧的,下面我来总结了几个常用的垂直水平居中实例代码,大家可参考参考。

首先我们我们想到居中就是相对于当前窗口,上边距和左边距各一半即可,于是有了下边的css样式:

 代码如下 复制代码

.center
{
    left:50%;
    top:50%;
    position:fixed;
}

我们很快发现,问题还没有真正解决,


要实现居中,我们要将对象向左、向上分别移动图片宽度、高度的一半,所以最终的样式如下:

 代码如下 复制代码

.center
{
    left:50%;
    margin-top:-50px;
    margin-left:-100px;
    top:50%;
    position:fixed;
}


<p style="background: #900; color: #00f; font: bold 12px/24px Helvertica,Arial,sans-serif; height:24px; width:370px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<br/>
<br/>
<p style="background: #090; color: #00f; font: bold 12px/2em Helvertica,Arial,sans-serif; height:2em; width:370px; overflow: hidden;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

 [Ctrl A 全部选择 提示:你可先修改部分代码,再按运行]
上一个高度是用的绝对单位px,并且没有隐藏溢出,下一个高度用的单位是相对单位em,并且隐藏了溢出。如果你的浏览器支持放大字体,那么尽情地放大字体,看看会出现什么效果。

二、多行内容居中,且容器高度可变
也很简单,给出一致的 padding-bottom 和 padding-top 就行

 代码如下 复制代码

.middle-demo-2{
padding-top: 24px;
padding-bottom: 24px;
}

优点:
1. 同时支持块级和内联极元素
2. 支持非文本内容
3. 支持所有浏览器
缺点:
容器不能固定高度

三、把容器当作表格单元
CSS 提供一系列diplay属性值,包括 display: table, display: table-row, display: table-cell 等,能把元素当作表格单元来显示。这是再加上 vertical-align: middle, 就和表格中的 valign="center" 一样了。

 代码如下 复制代码
.middle-demo-3{
display: table-cell;
height: 300px;
vertical-align: middle;
}

可惜IE不支持这些属性,不过在其他浏览器上显示效果非常完美。
要注意的是:和一个合法的<td>元素必须在<table>里一样,display: table-cell 元素必须作为 display: table 的元素的子孙出现。

优点:

不用说了吧,就是表格,效果和表格一模一样
缺点:

IE下无效


总结:本篇可以看出,实现css居中其实并不难,有时候当我们明白了原理之后,事情就变得非常简单了

您可能感兴趣的文章:
CSS中未知高度水平垂直居中实例
css实现在div水平垂直居中与图片水平居中的效果
css3内容垂直居中及垂直滚动条例子
基于jQuery实现的水平和垂直居中的div窗口
css3实现图片在容器中等比例缩放及水平垂直居中
css中文字图片背景图居中的方法汇总
css中元素水平垂直居中4种方法介绍
css实现body背景图片水平垂直居中方法
css 图片水平垂直居中实例小结
css垂直水平居中代码

[关闭]