CSS3实现水平居中、垂直居中、水平垂直居中的实例代码


Posted in HTML / CSS onFebruary 27, 2020

作为一个前端小猴子,不管是面试的时候还是工作中,我们都会或多或少的遇到“使用css居中”的效果,今天就写一篇关于css垂直水平居中的几种方法。

栗子1:从最简单的水平居中开始

margin: 0 auto;

块级元素使用margin: 0 auto;可以在父元素的中间位置居中,不过要记得设置块级元素的宽高。 HTML部分

<div class="wrap">
  <div class="example1">
    <p>CSS</p>
  </div>
</div>

CSS部分

.example1 {
  width: 200px;
  height: 200px;
  background-color: orange;
}
.example1 p {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 0 auto;
  line-height: 100px;
  text-align: center;
}

CSS3实现水平居中、垂直居中、水平垂直居中的实例代码 

栗子2:元素水平垂直居中

position 元素已知宽度 绝对定位+margin反向偏移

.wrap { position: relative; background-color: orange; width: 300px; height: 300px; } .example2 { background-color: red; width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; margin: -50px 0 0 -50px; }

position transform 元素未知宽度 如果元素未知宽度,只需将上面 example2 中的 margin: -50px 0 0 -50px ;替换为: transform: translate(-50%,-50%) ;

CSS3实现水平居中、垂直居中、水平垂直居中的实例代码 

栗子3: flex布局

HTML同上面,附 css 代码

.warp {
  background-color: #FF8C00;
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center; /*使子项目水平居中*/
  align-items: center; /*使子项目垂直居中*/
}
.example3 {
  background-color: #F00;
  width: 100px;
  height: 100px;
}

CSS3实现水平居中、垂直居中、水平垂直居中的实例代码 

另外一种就是 table-cell布局了,这个我就不介绍了,因为不想介绍。

栗子4: 绝对布局

div使用绝对布局,设置margin:auto;并设置top、left、right、bottom的值相等即可,不一定要都是0。 HTML部分

<div class="warp">
  <div class="example3">
    居中显示
  </div>
</div>

CSS部分

.warp {
  position: relative;
  background-color: orange;
  width: 200px;
  height: 200px;
}
.example3 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: red;
  width: 100px;
  height: 100px;
  margin: auto;
}

CSS3实现水平居中、垂直居中、水平垂直居中的实例代码 

栗子5:给子元素相对定位,在通过translaY()得到垂直居中

.warp {
  position: relative;
  background-color: orange;
  width: 200px;
  height: 200px;
}
.example3 {
  position: relative;
  top:50%;
  transform:translateY(-50%);
  background-color: red;
  width: 100px;
  height: 100px;
  margin: 0 auto;
}

CSS3实现水平居中、垂直居中、水平垂直居中的实例代码 

栗子6:利用inline-block的vertical-align: middle去对齐after伪元素

利用inline-block的vertical-align:middle去对齐after伪元素实现效果更加好,居中块的尺寸可以做包裹性、自适应内容,兼容性也相当好。缺点是水平居中需要考虑inline-block间隔中的留白(代码换行符遗留问题。)

.warp {
    text-align: center;
    overflow: auto;
    width: 200px;
    height: 200px;
    background-color: orange;
}
.example3 {
    display: inline-block;
    background-color: red;
    vertical-align: middle;
    width: 100px;
    height: 100px;
}

.warp:after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    margin-left: -0.25em;
    /* To offset spacing. May vary by font */
}

栗子7:display: flex-box

flexbox布局。此乃布局终极大法,专治各种布局定位难题!优点:能解决各种排列布局问题.

.warp {
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  background-color: orange;
}
 
.example3 {
  width: 100px;
  height: 100px;
  background-color: red;
}

CSS3实现水平居中、垂直居中、水平垂直居中的实例代码 

图片居中的栗子1:

<div class="warp">
  <div class="example3">
    <img src="xxxx" alt="">
  </div>
</div>
.warp {
  width: 200px;
  height: 200px;
  background-color: orange;
  display: flex;
  align-items: center;
  justify-content: center;
}
.example3 img {
  width: 100px;
  height: 100px;
  background-color: blue;
}

CSS3实现水平居中、垂直居中、水平垂直居中的实例代码 

总结

到此这篇关于CSS3实现水平居中、垂直居中、水平垂直居中的实例代码的文章就介绍到这了,更多相关css3 垂直居中内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3实现任意图片lowpoly动画效果实例
May 11 HTML / CSS
css实例教程 一款纯css3实现的超炫动画背画特效
Nov 05 HTML / CSS
纯css3实现的动画按钮的实例教程
Nov 17 HTML / CSS
10种CSS3实现的loading动画,挑一个走吧?
Nov 16 HTML / CSS
CSS3 实现倒计时效果
Nov 25 HTML / CSS
HTML5 FormData 方法介绍以及实现文件上传示例
Sep 12 HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
Jan 27 HTML / CSS
深入解析HTML5的IndexedDB索引数据库
Sep 14 HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
Jul 28 HTML / CSS
html5 canvas手势解锁源码分享
Jan 07 HTML / CSS
Unicode中的CJK(中日韩统一表意文字)字符小结
Dec 06 HTML / CSS
Li list-style-image 图片垂直居中实现方法
May 21 HTML / CSS
CSS3标注引用的出处和来源的方法
Feb 25 #HTML / CSS
CSS3关于z-index不生效问题的解决
Feb 19 #HTML / CSS
css3针对移动端卡顿问题的解决(动画性能优化)
Feb 14 #HTML / CSS
css3实现圆锥渐变conic-gradient效果
Feb 12 #HTML / CSS
css3翻牌翻数字的示例代码
Feb 07 #HTML / CSS
css3使用animation属性实现炫酷效果(推荐)
Feb 04 #HTML / CSS
CSS3中新增的对文本和字体的设置
Feb 03 #HTML / CSS
You might like
php采用session实现防止页面重复刷新
2015/12/24 PHP
PHP中的Trait 特性及作用
2016/04/03 PHP
php 删除一维数组中某一个值元素的操作方法
2018/02/01 PHP
JS中彻底删除JSON对象组成的数组中的元素
2020/09/22 PHP
鼠标图片振动代码
2006/07/06 Javascript
jquery 经典动画菜单效果代码
2010/01/26 Javascript
详谈 Jquery Ajax异步处理Json数据.
2011/09/09 Javascript
妙用Jquery的val()方法
2012/06/27 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
2015/11/30 Javascript
基于JavaScript实现div层跟随滚动条滑动
2016/01/12 Javascript
原生JavaScript实现滚动条效果
2020/03/24 Javascript
Node.js的Koa框架上手及MySQL操作指南
2016/06/13 Javascript
Bootstrap模态框插件使用详解
2017/05/11 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
快速搭建vue2.0+boostrap项目的方法
2018/04/09 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
2018/08/08 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
2018/08/17 Javascript
用Vue编写抽象组件的方法
2019/05/06 Javascript
python 不关闭控制台的实现方法
2011/10/23 Python
python的id()函数解密过程
2012/12/25 Python
python字符串加密解密的三种方法分享(base64 win32com)
2014/01/19 Python
django 2.0更新的10条注意事项总结
2018/01/05 Python
Python中文件的读取和写入操作
2018/04/27 Python
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
对Python中plt的画图函数详解
2018/11/07 Python
python爬取内容存入Excel实例
2019/02/20 Python
瑞贝卡·泰勒官方网站:Rebecca Taylor
2016/09/24 全球购物
最新大学生自我评价
2013/09/24 职场文书
国贸专业大学生职业生涯规划范文
2014/01/10 职场文书
新年联欢会主持词
2014/03/27 职场文书
商业计算机应用专业自荐书
2014/06/09 职场文书
七一建党节演讲稿
2014/09/11 职场文书
中秋客户感谢信
2015/01/22 职场文书
事业单位工作人员岗前培训心得体会
2016/01/08 职场文书
纯CSS实现hover图片pop-out弹出效果的实例代码
2021/04/16 HTML / CSS
yolov5返回坐标的方法实例
2022/03/17 Python