CSS水平垂直居中解决方案(6种)

互联网   02-10 15:11:32   作者:我是南方大汉   我要评论
这篇文章主要介绍了CSS水平垂直居中解决方案(6种)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
准备
创建元素
<div class="parent"> <div class="child">child</div> </div>
垂直水平居中方案一:知道宽度的情况下 absolute+margin负值
.parent { width:400px; height:400px; background: red; position: relative; } .child { position: absolute; left:50%; top:50%; background: yellow; width:50px; height:50px; margin-left:-25px; margin-top:-25px; }
垂直水平居中方案二:不知道宽高的情况下 absolute+transform
.parent { width:400px; height:400px; background: red; position: relative; } .child { position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); }
垂直居中方案三:position+margin:auto
.parent { position:relative; width:200px; height:200px; background: red; } .child { width:80px; height:40px; background: yellow; position: absolute; left:0; top:0; right:0 ; bottom:0; margin:auto; }
垂直居中方案四:+ 多行文本的垂直居中 :table-cell+vertical-align:middle;
.parent { height: 300px; width:400px; border: 1px solid red; display: table-cell; vertical-align: middle; text-align: center; } .child { display: inline-block; width:50px; height:50px; background: blue; } /* 或者 */ .parent { width: 400px; height: 300px; display: table-cell; vertical-align: middle; border: 1px solid red; text-align: center; } .child { display: inline-block; vertical-align: middle; background: blue; }
垂直居中方案五:display: flex
.parent { width:400px; height:200px; background:red; display: flex; justify-content:center; align-items:center; } .child { height:100px; width:100px; background:green; }
垂直居中方案六:伪元素
.parent { width:200px; height:200px; background:red; text-align: center; } .child { height:100px; width:100px; background:yellow; display: inline-block; vertical-align: middle; } .parent:before { content:""; height:100%; vertical-align: middle; display: inline-block; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
  1. Tag:css   水平   垂直   居中  

相关文章

  1. CSS 垂直水平居中的5种最佳解决方案
    本文给大家分享CSS 垂直水平居中的5种最佳解决方案以及各自的优缺点,本文给大家介绍的非常详细,具有参考借鉴价值,需要的朋友参考下吧
    2018-01-11
  2. CSS水平垂直居中的几种方法总结
    这篇文章主要介绍了CSS水平垂直居中的几种方法总结,垂直居中是布局中十分常见的效果之一,本文介绍了几种方法,有兴趣的可以了解一下。
    2016-12-19
  3. 纯css多种方法实现div中单行文字、多行文字及嵌套div垂直水平居中
    经常遇到要居中的问题,水平居中问题比较好解决,而垂直居中问题因为vertical-align经常失效,下面与大家分享下几个不错的解决方法
    2014-04-24
  4. 大小不固定的图片和多行文字的垂直水平居中实现分析
    其核心原理其实与第二种利用font-size大小实现IE下图片垂直居中是一致的。将font-size设置得很大,目的是撑开IE下默认文字空间的高度,其性质类似于空格,然后通过vertical
    2012-12-07
  5. 如何使div垂直水平居中的css代码
    很多人都会遇到这样的问题:如何使DIV居中,div垂直居中,div水平居中.
    2010-02-23
  6. CSS 实现未知内容高度的垂直水平居中(改良版)
    垂直居中在IE浏览器下的实现比较难实现,而更难实现的应该是未知内容高度的垂直水平居中!还好网上也有很多高人发布了一些解决的方法!这里我进行了一些改良,兼容FF,IE6
    2009-06-05
  7. CSS解决未知高度的垂直水平居中自适应问题
    今天有人问起,晚上试着写出来,供参考; 以下代码兼容主流浏览器IE6、IE7、Firefox、Opera。 从最简单的开始………… 一、如何让一个DIV水平居
    2009-04-04

最新评论

利发国际手机客户端