十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
今天小编给大家分享一下CSS如何实现水平与垂直居中的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
成都创新互联公司企业建站,10年网站建设经验,专注于网站建设技术,精于网页设计,有多年建站和网站代运营经验,设计师为客户打造网络企业风格,提供周到的建站售前咨询和贴心的售后服务。对于做网站、成都做网站中不同领域进行深入了解和探索,创新互联在网站建设中充分了解客户行业的需求,以灵动的思维在网页中充分展现,通过对客户行业精准市场调研,为客户提供的解决方案。
首先我先创建一个公共的模板样式
123
然后具体用到的样式单独写在方法里面,首先先介绍4个平时布局的技巧。
1.水平居中div里面的div,设置子元素的宽度。
.parent{ width:300px; margin:0 auto; }
注意:如果子元素设置了display:table-cell
,那么margin:0 auto;
将会失效。
2.设置文字垂直居中,设置包含文字div的高。
.child{ text-align:center line-height:100px //知道子元素的高,设置和高一样的高度 }
3.两个或者多个块级元素垂直居中对齐,父元素设置height和line-height相等。
.parent{ line-height: 300px; //知道父元素的高,设置和高一样的高度 } .child1{ display: inline-block; vertical-align: middle; line-height: initial; //initial 关键字用于设置 CSS 属性为它的默认值。 } .child2{ display: inline-block; vertical-align: middle; line-height: initial; //initial 关键字用于设置 CSS 属性为它的默认值。 }
4.让一个元素充满当前整个容器,设置absolute
.parent{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
OK,介绍完毕,下面开始介绍CSS实现水平垂直居中的方式。
1.不需要设置子元素的宽高,需要设置父元素的高度。使用 absolute + transform (推荐)
.parent{ position: relative } .child{ position: absolute; top:50%; left:50%; transform:translate(-50%,-50%) } // 备注一下,如果只需要上下居中那就只要保留top,只要左右居中的话就保留left,translate设置 translateY(-50%)或者translateX(-50%)
2.不需要设置子元素的宽高,不需要设置父元素的宽高。 使用flex布局(建议移动端直接使用flex
pc端看需要兼容的情况。)
.parent{ display:flex; align-items:center; justify-content:center; } .child{ }
3.不需要设置子元素的宽高,需要设置父元素的高度。使用 lineheight。
注意:这种方法需要通过text-align在子元素中将文字显示重置为想要的效果
.parent{ line-height: 300px; //设置和父元素的高度一样 text-align: center; } .child{ display: inline-block; vertical-align: middle; line-height: initial; //initial 关键字用于设置 CSS 属性为它的默认值。 text-align: left; //将文字显示重置为想要的效果 }
4.不需要设置子元素的宽高,需要设置父元素的高度。使用css-table (使用之后此元素的margin:0 auto
会失效)
.parent{ display: table-cell; vertical-align: middle; text-align: center; } .child{ display: inline-block; }
5.设置子元素的宽高,设置父元素的高度。 使用absolute + 负margin
.parent{ position: relative } .child{ position: absolute; top: 50%; left: 50%; margin-left: -50px; //知道子元素的宽高 margin-top: -50px; //知道子元素的宽高 }
6.设置子元素的宽高,设置父元素的高度。使用 absolute + margin auto
.parent{ position: relative } .child{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }
7.设置子元素的宽高,设置父元素的高度。 使用 absolute + calc(这种方法兼容性依赖calc的兼容性)
.parent{ position: relative } .child{ position: absolute; top: calc(50% - 50px); left: calc(50% - 50px); }
8.使用writing-mode(使用起来比较复杂,不推荐)
//公共的样式在最上面123
.parent{ writing-mode: vertical-lr; //改变文字显示的方向 text-align: center; } .box-child{ writing-mode: horizontal-tb; display: inline-block; text-align: center; width: 100%; } .child{ text-align: left; //将文字显示重置为想要的效果 margin: 0 auto; }
9.不需要设置子元素的宽高,不需要设置父元素的宽高。 使用grid布局(不建议使用,目前兼容性不是很好)
.parent{ display: grid; } .child{ align-self: center; justify-self: center; }
10.使用table布局(纯粹凑方法,这年头,谁还用table布局呀,哈哈哈哈)
123
|
.parent{ text-align: center; } .child{ display: inline-block; }
以上就是“CSS如何实现水平与垂直居中”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注创新互联行业资讯频道。