CSS实现垂直居中

最新推荐文章于 2022-08-31 23:25:33 发布

lowers_sunshine

最新推荐文章于 2022-08-31 23:25:33 发布

阅读量205

点赞数

分类专栏： css 文章标签： flex 布局垂直居中

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1、line-height

div{
    height: 100px;
    line-height:100px;
    text-align:center;
}

2、display:table-cell

table-cell这个属性是在看head first 书的时候学习的，通过display 设置为table table-row table-cell，让元素以表格的样子显示。

.out{
    display:table;
}
.inner{
    display: table-cell;
    vertical-align: middle;
}

3、CSS3的flex布局

div{
    /*设置为伸缩容器*/
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    /*水平居中*/
    -webkit-box-pack: center;/*旧版本*/
    -moz-box-pack: center;/*旧版本*/
    -ms-flex-pack:center;/*混合版本*/
    -webkit-justify-content:center;/*新版本*/
    justify-content: center;/*新版本*/
    /*垂直居中*/
    -webkit-box-align: center;/*旧版本*/
    -moz-box-align: center;/*旧版本*/
    -ms-flex-align: center;/*混合版本*/
    -webkit-align-items: center;/*新版本*/
    align-items: center;/*新版本*/
}

4、使用padding，这需要知道确定的高度
5、CSS3的transform来实现

.center-vertical{
  position: relative;
  top:50%;
  transform:translateY(-50%);
}.center-horizontal{
  position: relative;
  left:50%;
  transform:translateX(-50%); 
}

5、纯CSS实现不固定大小div相对于body垂直居中效果

<!DOCTYPE html>
<html>
<head>
<title>纯CSS实现不固定大小div相对于body垂直居中效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
.lanrenzhijia {position: fixed;left: -100%;right:100%;top:0;bottom: 0;text-align: center;font-size: 0;}
.lanrenzhijia:after {content:"";display: inline-block;vertical-align: middle;height: 100%;width: 0;}
.content {display: inline-block; *display: inline; *zoom:1;	vertical-align: middle;position: relative;right: -100%;background:#639A29;width:300px;height:300px;}
</style>
</head>
<body >
<div class="lanrenzhijia">
  <div class="content"></div>
</div>
</body>
</html>

lowers_sunshine

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS实现垂直居中

1、line-heightdiv{ height: 100px; line-height:100px; text-align:center;}2、display:table-celltable-cell这个属性是在看head first 书的时候学习的，通过display 设置为table table-row table-cell，让元素以表格的样子显示。.o
复制链接

扫一扫

专栏目录