微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

css层居中怎么设置

CSS层居中是指把一个元素居中在页面或父元素中,包括垂直居中和水平居中两种方式,这在网页设计中非常常见。下面我们来介绍几种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] 举报,一经查实,本站将立刻删除。