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

原创 2016年08月30日 16:28:32

方法一:使用dispaly:inline-block 和 vertical-align 还有伪类实现

.block1{text-align:center;border:1px solid red;height:600px; }
.block1:before{content:'';display:inline-block;height:100%;vertical-align:middle;margin-right:-0.25em;}
.center1{display:inline-block;vertical-align:middle;max-width: 90%;background-color:#00bcd4;}

方法二:使用相对定位或者固定定位和transform来实现。(ie8及以下不支持)

.block2{text-align:center;border:1px solid blue;position:relative;height:600px;}
.center2{position:absolute;top:50%;left:50%;background-color:#000;transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%)}

方法三:使用display:table和table-tell和vertical-align来实现。(ie8及以下不支持)

.block3{display:table;width:100%;height:600px;border:1px solid blue;}
.center3{display:table-cell;text-align:center;vertical-align:middle;background-color: #b6c7c0}

以上三个的html

<body>
<div class="block1">
    <div class="center1">
            <h4>标题标题标题</h4>
            <a href="#"><img src="http://www.51detao.com/images/home/guide/guide1.png" alt="..."></a>
            <div class="intro">简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介</div>
    </div>
</div>
<div class="block2">
    <div class="center2">
        <h4>标题标题标题</h4>
        <a href="#"><img src="http://www.51detao.com/images/home/guide/guide1.png" alt="..."></a>
        <div class="intro">简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介</div>
    </div>
</div>
<div class="block3">
    <div class="center3">
        <h4>标题标题标题</h4>
        <a href="#"><img src="http://www.51detao.com/images/home/guide/guide1.png" alt="..."></a>
        <div class="intro">简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介</div>
    </div>
</div>
</body>
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

七种CSS方式让一个容器水平垂直居中

阅读目录 方法一:position加margin  方法二: diaplay:table-cell  方法三:position加 transform  方法四:flex;align-ite...

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

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

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

前言 由于HTML语言的定位问题,在网页中实现居中也不是如word中那么简单,尤其在内容样式多变,内容宽高不定的情况下,要实现合理的居中也是颇考验工程师经验的。网上讲居中的文章很多,但是都不...

CSS中元素水平垂直居中4种方法介绍

第一种方法:table-cell轻松设置文本图片水平垂直居中   让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(...

CSS垂直居中的6种方式,最快只用两行代码

本文给出了6种利用CSS使HTML元素垂直居中与父元素的方法,其中包括:1、2 绝对定位的方式3 基于属性计算的方式(只需要2行代码哦)4 利用vertical-align属性5 盒子模型方式6 基于...

如何让DIV水平和垂直居中三种方法

方法1 CSS实现水平和垂直居中要让DIV水平和垂直居中,必需知道该DIV得宽度和高度,然后设置位置为绝对位置,距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50...

CSS 元素垂直居中的 6种方法

转自:http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E...

实现垂直居中的几种方式

方式一:单行文本垂直居中 其实单行文本垂直居中是垂直居中中最为简单的了。通常使用line-height 和 height配合使用即可,也就是将line-height和height设置为同样的数值。 ...

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

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

Sql语句里的递归查询

Sql语句里的递归查询 SqlServer2005和Oracle 两个版本   以前使用Oracle,觉得它的递归查询很好用,就研究了一下SqlServer,发现它...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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