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 选择器 伪类选择器介绍
Jan 21 HTML / CSS
css3实现input输入框颜色渐变发光效果代码
Apr 02 HTML / CSS
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
Apr 26 HTML / CSS
实例讲解CSS3中的box-flex弹性盒属性布局
Jun 09 HTML / CSS
css3旋转木马_动力节点Java学院整理
Jul 12 HTML / CSS
CSS3自定义滚动条样式的示例代码
Aug 21 HTML / CSS
HTML5之SVG 2D入门7—SVG元素的重用与引用
Jan 30 HTML / CSS
html5 video标签屏蔽右键视频另存为的js代码
Nov 12 HTML / CSS
html5调用app分享功能示例(WebViewJavascriptBridge)
Mar 21 HTML / CSS
用canvas画心电图的示例代码
Sep 10 HTML / CSS
详解HTML5常用的语义化标签
Sep 27 HTML / CSS
CSS中calc(100%-100px)不加空格不生效
May 07 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
一个简单计数器的源代码
2006/10/09 PHP
PHP四舍五入、取整、round函数使用示例
2015/02/06 PHP
CentOS7.0下安装PHP5.6.30服务的教程详解
2018/09/29 PHP
在IE下:float属性会影响offsetTop的取值
2006/12/22 Javascript
javascript使用eval或者new Function进行语法检查
2010/10/16 Javascript
基于jquery的下拉框改变动态添加和删除表格实现代码
2020/09/12 Javascript
js hover 定时器(实例代码)
2013/11/12 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
2015/03/25 Javascript
使用AngularJS创建自定义的过滤器的方法
2015/06/18 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
2015/10/09 Javascript
JavaScript 节流函数 Throttle 详解
2016/07/04 Javascript
AngularJS控制器之间的通信方式详解
2016/11/03 Javascript
Bootstrap Table使用整理(三)
2017/06/09 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
2017/06/25 Javascript
phantomjs导出html到pdf的方法总结
2017/10/19 Javascript
Bootstrap 树控件使用经验分享(图文解说)
2017/11/06 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
2018/04/08 Javascript
webpack实现一个行内样式px转vw的loader示例
2018/09/13 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
[02:39]DOTA2英雄基础教程 极限穿梭编织者
2013/12/05 DOTA
Python中对列表排序实例
2015/01/04 Python
Flask框架的学习指南之用户登录管理
2016/11/20 Python
Python中最大最小赋值小技巧(分享)
2017/12/23 Python
在django项目中导出数据到excel文件并实现下载的功能
2020/03/13 Python
Python根据指定文件生成XML的方法
2020/06/29 Python
巴西家用小家电购物网站:Polishop
2016/08/07 全球购物
中国网上药店领导者:1药网
2017/02/16 全球购物
佛罗里达州印第安河新鲜水果:Hale Groves
2017/02/20 全球购物
美国婚礼装饰和活动用品批发供应商:Event Decor Direct
2018/10/12 全球购物
路政管理专业个人自荐信范文
2013/11/30 职场文书
白酒市场开发计划书
2014/01/09 职场文书
篮球友谊赛通讯稿
2014/10/10 职场文书
2015年高三教学工作总结
2015/07/21 职场文书
使用Oracle命令进行数据库备份与还原
2021/12/06 Oracle
简单聊聊Golang中defer预计算参数
2022/03/25 Golang
使用Python通过企业微信应用给企业成员发消息
2022/04/18 Python