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

本篇文章给大家介绍CSS实现水平垂直居中的几种方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

水平居中最常用的就是text-align:center; 和 margin:0 auto; 其中text-align:center;是对内部子元素(inline/inline-block)起作用,而margin:0 auto;是对元素自身(block)起作用,具体根据自己的需要适当地运用。

垂直居中常用的有line-height 和 vertical-align:middle,但是它们都有使用的限制条件或者前提吧。比如line-height得和height一样高,vertical-align:middle 只对inline-block起作用,但其实还有很多坑,个人不怎么喜欢使用vertical-align。

下面我们就直接进入水平垂直居中的讨论吧:

其实吧,水平垂直居中也是有两种情况:知道宽高 和 不知道宽高。

一、已知宽高的水平垂直居中

在这种情况下,其实就很好解决了,实例说明一下:

html代码:

<div class="wrap">
   <div class="child">水平垂直居中</div>
</div>

默认样式:

.wrap{
  width:400px;
  height:400px;
  border:1px solid red;
  margin:0 auto;
}
.child{
  width:200px;
  height:200px;
  background:#ccc;
}

现在的情况是这样的:

1.jpg

因为我们是已知宽高的,所以可以给子元素加外边距挤到中间位置,或者通过绝对定位到中间位置,当然还有一些方法,我就放在未知宽高的情况下再介绍,因为已知宽高包含于未知宽高,所以为了避免重复,我就分开了,这里就只讲仅适合已知宽高的情况。

我们给子元素加上外边距:

.child{
  margin-top:100px;
  margin-left:100px;
}

这时内部子元素就水平垂直居中了。

2.png

现在使用绝对定位来实现:

.wrap{
  position:relative;
}
.child{
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-100px;
  margin-left:-100px;
}

貌似绝对定位比较麻烦,但其实绝对定位对整体布局更好一些,也是比较常用。

二、未知宽高的水平垂直居中

1、绝对定位+css3 transform:translate(-50%,-50%)

.wrap{
  position:relative;
}
.child{
  position: absolute;
  top:50%;
  left:50%;
  -webkit-transform:translate(-50%,-50%);
}

2、css3 的flex布局

.wrap{
  display:flex;
  justify-content:center;
}
.child{
  align-self:center;
}

3、table布局

<div class="wrap">
   <div class="child">
          <div>sadgsdgasgd</div>
   </div>
</div>
.wrap{
  display:table;
  text-align:center;
}
.child{
  background:#ccc;
  display:table-cell;
  vertical-align:middle;
}
.child div{
    width:300px;
    height:150px;
    background:red;
    margin:0 auto;
}

table布局貌似得多套一层,试了好多遍,两层都出不来效果。但是这种html结构太冗余了。所以前两种比较新潮一些。

OK,水平垂直居中就讲到这里,以上都是自己琢磨的一些方法,有什么纰漏或者不恰当的地方,欢迎留言指正。

本文转载自:https://www.cnblogs.com/jr1993/p/4788718.html

更多web开发知识,请查阅 HTML中文网 !!

以上就是CSS实现水平垂直居中的几种方法的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏