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完美实现垂直水平居中的6种方式

纯CSS完美实现垂直水平居中的6种方式 时间 2016-07-29 13:12:19 SegmentFault 原文  https://segmentfault.com/a/119...
  • shiyuqiong
  • shiyuqiong
  • 2016年07月30日 22:16
  • 1677

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

1.用line-block和vertical-align来实现居中:这种方法适合于未知宽度高度的情况下。 Title #container{ ...
  • baidu_24024601
  • baidu_24024601
  • 2016年04月12日 11:01
  • 5972

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

本文由 起步科技 原创。未经许可,禁止转载! 作者:起步科技前端研究员小茄,专注分享HTML5 App快速开发工具 WeX5 的黑魔法以及各种有趣炫酷的前端技术。 前言由于HTML语言的定位问题...
  • justeptech
  • justeptech
  • 2016年07月13日 12:01
  • 10258

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

方法一:使用dispaly:inline-block 和 vertical-align 还有伪类实现 .block1{text-align:center;border:1px solid red;h...
  • leadn
  • leadn
  • 2017年11月25日 15:58
  • 79

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

css中子元素水平垂直居中三种的方法
  • mutouafangzi
  • mutouafangzi
  • 2017年08月04日 22:33
  • 228

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

css实现水平垂直居中的几种方法
  • Supremeyh
  • Supremeyh
  • 2017年05月30日 18:44
  • 252

css实现一个容器的水平垂直居中-兼容所有的浏览器

  • 2016年10月09日 16:35
  • 5KB
  • 下载

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

css元素水平垂直居中
  • qq_27576607
  • qq_27576607
  • 2017年12月02日 20:15
  • 52

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

一、脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position:...
  • liuqiao1123
  • liuqiao1123
  • 2017年07月27日 10:21
  • 164

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

1、使用绝对定位(position)和外边距(margin)       适用范围:子级元素(content)宽高固定       方法:(1)将父级 (box)设置成相对定位(relative);(...
  • h5css3_linhuai
  • h5css3_linhuai
  • 2017年05月16日 17:39
  • 207
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css水平垂直居中三种实现方法
举报原因:
原因补充:

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