微信号:WEB_wysj

介绍:平台每天更新最实用,最新颖的网页设计、网站制作技巧精品文章,分享html+css、JavaScript、jQuery,ps等直播课录像,国内知名设计师亲授!无论你身在何处,和大家一起来利用零碎的时间学习知识,涨见识、涨工资吧!

CSS水平垂直居中解决方案

2018-02-11 18:00 网页设计自学平台

网页设计自学平台
互联网时代怎能不懂一点设计和代码

准备

创建元素

<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;
}
HTML、CSS、JS全套基础入门教程
点我获取

 
网页设计自学平台 更多文章 这个华人程序员是如何 6 个月狂赚 125 亿的? 如果IT圈也有春晚,节目单会是什么样? 程序员编程必备的6大装备,比尔盖茨居然也用三个屏幕编程! 过年神一样的尬聊!当亲戚问“你是干什么的” 前端小白如何快速入门提升拿到30K以上的月薪!
猜您喜欢 深度解析京东个性化推荐系统演进史 落水鬼?水猴子?最新“水鬼”出现了,这货……有点眼熟啊! 试玩Python版的网页微信 德勤:2016-2017年全球CIO调查报告 XMPP协议在途牛APP中的应用实践