CSS层居中是指把一个元素居中在页面或父元素中,包括垂直居中和水平居中两种方式,这在网页设计中非常常见。下面我们来介绍几种CSS层居中的设置方法。
一、水平居中方法:
父元素 { text-align: center; } 子元素 { display: inline-block;/* 或者设置为block */ }
二、垂直居中方法:
父元素 { display: flex; justify-content: center; align-items: center; }
三、水平垂直同时居中方法:
父元素 { position: relative; } 子元素 { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
以上就是CSS层居中的常用方法,需要注意的是,对于水平垂直同时居中的方法,父元素需要设置position:relative属性才能让子元素相对于它进行定位,同时也需要对子元素设置默认的position属性值为absolute。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。