大家是不是对元素居中的知识点很是模糊？是不是苦于找不到一个总结的通俗易懂的说明？是不是自己懒得去总结？今天小编在前端的学习与实践中总结出的元素的五大居中方式，黏贴了代码并对代码做了解释，希望对迷茫的有所帮助！

下面的居中示例中，统一使用了同一个div作为父元素和p作为子元素

设置一个div,并且设置了div的宽高边框，div里面设置一个块元素p，设置了它的宽高和背景色

css居中方式1

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>五大居中1</title>

<style>

*{margin:0;}

div{width:200px;height:300px;border:2px solid #000;margin:200px auto;

text-align:center;font-size:0;

}

div p{width:100px;height:100px;background:#666;

display:inline-block;vertical-align:middle;

}

div:after{content:"";display:inline-block;height:100%;vertical-align:middle;}

</style>

</head>

<body>

<div>

<p></p>

</div>

</body>

</html>

这里利用了伪元素让子元素p在div盒子里左右水平居中只需要在它的父元素div里加text-align:center;垂直方向居中需要在父元素后面加了一个伪元素，并使得样式为inline-block;height:100%;就是和父元素一样高，vertical-align:middle;垂直居中，也就是p元素相对与伪元素居中，由于伪元素和div一样高，所以相当于p元素在div里垂直居中。

css居中方式2

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>五大居中2</title>

<style>

*{margin:0;}

div{position:relative;width:300px;height:400px;border:1px solid #000;margin:100px auto;}

p{position:absolute;left:0;bottom:0;right:0;top:0;margin:auto;width:100px;height:100px;background:#f99;}

</style>

</head>

<body>

<div>

<p></p>

</div>

</body>

</html>

这里利用了定位居中

子元素p设置position：absolute脱离文档流,默认以html作为父元素，所以我们给父元素div设置position:relative;使得p以div为父元素做位置的变动，left:0;tight:0;top:0;bottom:0;（只有设置了定位的元素才可以使用这种方式来移动），最后margin:auto;就会水平和垂直都居中。

css居中方式3

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>五大居中3</title>

<style>

*{margin:0;}

div{display:flex;justify-content:center;align-items:center;width:300px;height:400px;border:1px solid #000;margin:100px auto;}

p{width:100px;height:100px;background:#f99;}

</style>

</head>

<body>

<div>

<p></p>

</div>

</body>

</html>

这里利用了弹性盒居中

父元素div设置成弹性盒样式，justify-content:center;主轴居中

align-items:center;垂直居中（而且这两个只能设置在父元素上，弹性盒知识）

css居中方式4

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>五大居中4</title>

<style>

*{margin:0;}

div{position:relative;width:300px;height:400px;border:1px solid #000;margin:100px auto;}

p{width:100px;height:100px;background:#f99;position:absolute;

left:50%;top:50%;margin:-50px 0 0 -50px;}

</style>

</head>

<body>

<div>

<p></p>

</div>

</body>

</html>

利用定位线左上角居中，然后左移子元素宽度的一半，再上移子元素高度的一半。

css居中方式5

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>五大居中5</title>

<style>

*{margin:0;}

div{position:relative;width:300px;height:400px;border:1px solid #000;margin:100px auto;}

p{position:absolute;width:100px;height:100px;background:#f99;left:50%;top:50%;

transform:translate(-50%,-50%);}

</style>

</head>

<body>

<div>

<p></p>

</div>

</body>

</html>

利用动画移动属性transform

结语

相信看了上面的有关Html5、css的元素五大居中方式，你们就可以解决自己的小问题了，但是也要养成一个总结的好习惯。好记性不如烂笔头！以前留下来的话语总是有他的道理。Come on！

伪元素在父元素中居中_web前端Html5开发CSS之元素五大居中方式，实用又简单！...相关推荐

  1. 外部导入方式添加背景图_web前端基础：CSS的三种导入方式说明

    随着html的成长,为了满足页面设计者的要求,HTML添加了很多显示功能.但是随着这些功能的增加,HTML变得越来越杂乱,而且HTML页面也越来越臃肿.于是css便诞生了. Web前端基础教程,Web ...

  2. javascript 获取元素在父节点中的下标

    jquery中直接通过$(this).index()即可得到当前元素的下标.但原生JavaScript并没有提供类似的属性或方法,这时候可以调用数组中的indexOf方法直接计算 <ul> ...

  3. display none 隐藏后怎么显示_web前端入门到实战：元素显示隐藏的9种思路

    我自己是一名从事了多年开发的web前端老程序员,目前辞职在做自己的web前端私人定制课程,今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴 ...

  4. web前端字体居中_html怎么让图片居中_WEB前端开发,html,文字居中

    ps扣完图怎么提取出来_WEB前端开发 ps扣完图提取出来的方法:首先打开ps并打开需要抠的图片:然后选择钢笔工具,沿着物体外部,勾画闭合路径:接着依次选择"建立选区或者切换到路径面板-建立 ...

  5. 盘点：崛起中的九大HTML5开发工具

    HTML5被看做是Web开发者创建流行Web应用的利器,增加了对视频和Canvas 2D的支持.HTML5的诞生还让人们重新审视浏览器专用多媒体插件的未来,如Adobe的Flash和微软的Silver ...

  6. python和html可以同时学吗_web前端入门：css+html5+javascript同时学可以吗？

    HTML+CSS+JS是前端基础核心知识,肯定是都要学的.在web前端中,HTML是结构标准,CSS是样式标准,JS是行为标准,三者缺一不可.说的直白点,HTML就是骨架,CSS就是皮肤,JS就是灵魂 ...

  7. web设计之：崛起中的九大HTML5开发工具

    HTML5被看做是Web开发者创建流行Web应用的利器,增加了对视频和Canvas 2D的支持.HTML5的诞生还让人们重新审视浏览器专用多媒体插件的未来,如Adobe的Flash和微软的Silver ...

  8. 崛起中的九大HTML5开发工具

    摘要:HTML5正在以惊人的速度崛起,虽然HTML5标准尚未开发完成,但是随着开发者对HTML5的兴趣日渐浓厚,开发工具提供商也开始跟进.本文总结了5个当今最流行而且未来会成为主流HTML5的开发工具 ...

  9. HTML变列自适应布局三行,div自适应居中_典型的DIV CSS三行二列居中高度自适应布局...

    摘要 腾兴网为您分享:典型的DIV CSS三行二列居中高度自适应布局,弈玩游戏,携程,悟空单车,我和你等软件知识,以及驾考精灵,指尖遥控,广告拦截,浙江学习网,360主题桌面,平板电脑qq,咖啡厅室内 ...

最新文章

  1. java里写分页,自己写的Java分页类
  2. 视觉Transformer快速入门指南！
  3. TP5实现邮件发送（PHP 利用QQ邮箱发送邮件「PHPMailer」）
  4. C 语言 链表的创建与打印
  5. vue 2.0 无法编译ES6语法
  6. PHP获取用户ip、地理位置、浏览器和系统信息
  7. 3GPP定义的IMSnbsp;ECT业务与Conf…
  8. SAP表维护自动带出对象属性
  9. 永洪BI配置GIS地图的方法
  10. 美团面试小感——认知撑起的格局
  11. SAS数据导入input要点
  12. Linux接蓝牙音响无声音,win10蓝牙音箱没有声音怎么办_win10蓝牙音响连接成功没声音处理方法...
  13. [zt]软件研发的6sigma案例解析
  14. 关于ubuntu 系统chromiuｍ浏览器启用AdobeFlashPlayer
  15. 任意阶幻方的解法及c++实现
  16. 送小情人一个深海之声蓝牙耳机，樱花粉简直美得没朋友
  17. 如何下载白纸坊街道卫星地图高清版大图
  18. vuze自动关机插件
  19. https://www.52pojie.cn/thread-688820-1-1.html
  20. 硬件设计——BUCK电路仿真设计

热门文章

  1. java注释越多_java 注释+常便量
  2. python判断日期为第几天_python怎么判断某一天是一年中的第几天
  3. 拼多多2018校招内推编程-大整数相乘
  4. MATLAB图像基本变换实验报告,MATLAB图像增强与变换处理实验报告
  5. java流有什么用_在Java中，流比循环有什么优势？
  6. ig 焊接机器人_发那科机器人焊接应用的IO配置(总线型)
  7. idea package放在什么位置_NBA现役球员大排名，你会把20岁的东契奇放在什么位置？...
  8. python中向量长度_线性代数精华——矩阵的特征值与特征向量
  9. button添加插槽之后绑定不来事件_javaScript基础事件（二）事件处理程序
  10. 【MATLAB】三维曲线（plot3）