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 3D位移translate效果实例介绍
May 03 HTML / CSS
CSS3 滤镜 webkit-filter详细介绍及使用方法
Dec 27 HTML / CSS
CSS3——齿轮转动关键代码
May 02 HTML / CSS
css3新增颜色表示方式分享
Apr 15 HTML / CSS
使用CSS禁止textarea调整大小功能的方法
Mar 13 HTML / CSS
Html5中的桌面通知Notification的实现
Sep 25 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
Dec 13 HTML / CSS
html5 application cache遇到的严重问题
Dec 26 HTML / CSS
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
May 15 HTML / CSS
HTML5中图片之间的缝隙完美解决方法
Jul 07 HTML / CSS
H5混合开发app如何升级的方法
Jan 10 HTML / CSS
Canvas获取视频第一帧缩略图的实现
Nov 11 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
ThinkPHP php 框架学习笔记
2009/10/30 PHP
PHP学习笔记(二):变量详解
2015/04/17 PHP
PHP上传图片、删除图片简单实例
2016/11/12 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
js 页面执行时间计算代码
2009/03/04 Javascript
IE的事件传递-event.cancelBubble示例介绍
2014/01/12 Javascript
文本框文本自动补全效果示例分享
2014/01/19 Javascript
使用js操作css实现js改变背景图片示例
2014/03/10 Javascript
jQuery的position()方法详解
2015/07/19 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
2015/08/05 Javascript
Javascript中call,apply,bind方法的详解与总结
2016/12/12 Javascript
JS实现颜色梯度与渐变效果完整实例
2016/12/30 Javascript
angular.JS实现网页禁用调试、复制和剪切
2017/03/31 Javascript
addEventListener()与removeEventListener()解析
2017/04/20 Javascript
MvcPager分页控件 适用于Bootstrap
2017/06/03 Javascript
JavaScript常见鼠标事件与用法分析
2019/01/03 Javascript
Vue 2.0 侦听器 watch属性代码详解
2019/06/19 Javascript
详解解决小程序中webview页面多层history返回问题
2019/08/20 Javascript
layui table数据修改的回显方法
2019/09/04 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
2020/02/14 Javascript
python高并发异步服务器核心库forkcore使用方法
2013/11/26 Python
Python中easy_install 和 pip 的安装及使用
2017/06/05 Python
Python+matplotlib实现填充螺旋实例
2018/01/15 Python
Python SQLite3简介
2018/02/22 Python
python实现提取str字符串/json中多级目录下的某个值
2020/02/27 Python
python输出第n个默尼森数的实现示例
2020/03/08 Python
tensorflow 2.0模式下训练的模型转成 tf1.x 版本的pb模型实例
2020/06/22 Python
css3实现背景动态渐变效果
2019/12/10 HTML / CSS
Cole Haan官方网站:美国时尚潮流品牌
2017/12/06 全球购物
台湾最大银发乐活百货:乐龄网
2018/05/21 全球购物
一套Delphi的笔试题二
2013/05/11 面试题
实习期自我鉴定
2013/10/11 职场文书
酒店总经理职务说明书
2014/02/26 职场文书
小学师德标兵先进事迹材料
2014/05/25 职场文书
2015年反腐倡廉工作总结
2015/05/14 职场文书
六一儿童节主持开场白
2015/05/28 职场文书