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 相关文章推荐
HTML+CSS3 模仿Windows7 桌面效果
Jun 17 HTML / CSS
让IE6支持css3,让 IE7、IE8 都支持CSS3
Oct 09 HTML / CSS
CSS3绘制不规则图形的一些方法示例
Nov 07 HTML / CSS
html5理解head_动力节点Java学院整理
Jul 13 HTML / CSS
详解canvas drawImage()方法绘制图片不显示的问题
Oct 08 HTML / CSS
详解Html5 Canvas画线有毛边解决方法
Mar 01 HTML / CSS
X/HTML5 和 XHTML2
Oct 17 HTML / CSS
简单的HTML5初步入门教程
Sep 29 HTML / CSS
浅谈html5增强的页面元素
Jun 14 HTML / CSS
html5手机端页面可以向右滑动导致样式受影响的问题
Jun 20 HTML / CSS
浅谈HTML5中dialog元素尝鲜
Oct 15 HTML / CSS
HTML5录音实践总结(Preact)
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
缓存技术详谈―php
2006/12/14 PHP
php中的一个中文字符串截取函数
2007/02/14 PHP
php采集速度探究总结(原创)
2008/04/18 PHP
ThinkPHP行为扩展Behavior应用实例详解
2014/07/22 PHP
PHP网站建设的流程与步骤分享
2015/09/25 PHP
php头像上传预览实例代码
2017/05/02 PHP
JavaScript 选中文字并响应获取的实现代码
2011/08/28 Javascript
Jquery解析Json格式数据过程代码
2014/10/17 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
2015/09/12 Javascript
bootstrap实现弹窗和拖动效果
2016/01/03 Javascript
微信小程序 网络API发起请求详解
2016/11/09 Javascript
jquery表单验证插件validation使用方法详解
2017/01/20 Javascript
Avalonjs双向数据绑定与监听的实例代码
2017/06/23 Javascript
React Native验证码倒计时工具类分享
2017/10/24 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
2017/12/11 Javascript
vue.js 实现评价五角星组件的实例代码
2018/08/13 Javascript
vue 详情跳转至列表页实现列表页缓存
2019/03/27 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
8个非常实用的Vue自定义指令
2020/12/15 Vue.js
[01:06:26]全国守擂赛第二周 Team Coach vs DeMonsTer
2020/04/28 DOTA
Python实现将数据框数据写入mongodb及mysql数据库的方法
2018/04/02 Python
django框架自定义模板标签(template tag)操作示例
2019/06/24 Python
python实现sm2和sm4国密(国家商用密码)算法的示例
2020/09/26 Python
Python判断变量是否是None写法代码实例
2020/10/09 Python
Lands’ End官网:经典的美国生活方式品牌
2016/08/14 全球购物
德国旅行、体验和活动的预订平台:Watado
2019/12/04 全球购物
2014年国庆节广播稿
2014/09/19 职场文书
2014年“世界无车日”活动方案
2014/09/21 职场文书
大学生党员批评与自我批评
2014/09/28 职场文书
银行先进个人总结
2015/02/15 职场文书
教师自荐信范文
2015/03/06 职场文书
《丑小鸭》教学反思
2016/02/19 职场文书
2019暑假阅读倡议书
2019/06/24 职场文书
mysql数据库入门第一步之创建表
2021/05/14 MySQL
vue使用Google Recaptcha验证的实现示例
2021/08/23 Vue.js
全网非常详细的pytest配置文件
2022/07/15 Python