css样式盒子常见的几种居中方式
假设一个div里面有一个p元素。
<div><p></p></div>
第一种居中方式:
利用了伪元素让子元素p在div盒子里左右水平居中只需要在它的父元素div里加text-align:center;垂直方向居中需要在父元素后面加了一个伪元素,并使得样式为inline-block;height:100%;就是和父元素一样高,vertical-align:middle;垂直居中,也就是p元素相对与伪元素居中,由于伪元素和div一样高,所以相当于p元素在div里垂直居中。
css样式如下:
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;}
第二种居中方式:
这里利用了定位居中
子元素p设置position:absolute脱离文档流,默认以html作为父元素,所以我们给父元素div设置position:relative;使得p以div为父元素做位置的变动,left:0;tight:0;top:0;bottom:0;(只有设置了定位的元素才可以使用这种方式来移动),最后margin:auto;就会水平和垂直都居中。
第三种居中方式:
这里利用了弹性盒居中
父元素div设置成弹性盒样式,justify-content:center;主轴居中
align-items:center;垂直居中(而且这两个只能设置在父元素上,弹性盒知识)
css样式:
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;}
第四种居中方式:
利用定位线左上角居中,然后左移子元素宽度的一半,再上移子元素高度的一半。
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;}
第五种居中方式:
利用定位+动画移动属性transform
transform:translate(-50%,-50%);
上一篇: css图片居中的方法总结
下一篇: Css的几种实现水平垂直居中方式
推荐阅读
-
【基础】这15种CSS居中的方式,你都用过哪几种?-CSS技术学习-SegmentFault思否
-
CSS3 不定高宽垂直水平居中的几种方式
-
中间盒子自适应居中常用的几种方式(代码实例)
-
css元素居中布局的几种方式
-
《Web开发中让盒子居中的几种方法》_html/css_WEB-ITnose
-
网页中应用CSS样式的几种方式_html/css_WEB-ITnose
-
《Web开发中让盒子居中的几种方法》_html/css_WEB-ITnose
-
常见的几种 CSS 水平垂直居中解决办法_html/css_WEB-ITnose
-
网页中应用CSS样式的几种方式_html/css_WEB-ITnose
-
css实现元素水平垂直居中常见的两种方式实例详解