Web前端开发CSS居中的方式有哪些

这篇文章主要介绍“Web前端开发CSS居中的方式有哪些”，在日常操作中，相信很多人在Web前端开发CSS居中的方式有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Web前端开发CSS居中的方式有哪些”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

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

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

css居中方式1

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

css居中方式2

　　这里利用了定位居中

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

css居中方式3

　　这里利用了弹性盒居中

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

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

css居中方式4

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

css居中方式5

　　利用动画移动属性transform

到此，关于“Web前端开发CSS居中的方式有哪些”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！