css垂直水平居中常用方法

in 网站建设
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

方法一:已知子元素具体宽高+position

父元素:position:relative;
子元素:position:absolute;top:50%;left:50%;margin-top:-子元素高度一半;margin-left:-子元素宽度一半;

.first{
    width:300px;
    height:200px;
    position:relative;
 }
.item1{
    width:200px;
    height:80px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-40px;
    margin-left:-100px;
} 


方法二:未知子元素具体宽高+position+translate

父元素:position:relative;
子元素:position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);

.second{
    width:300px;
    height:200px;
    position:relative;
}
.item-2{
    width:60%;
    height:40%;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}


方法三:弹性布局

父元素添加以下内容:
display:flex; //弹性布局
align-items: center; //水平居中
justify-content:center; //垂直居中

.third{
    width:300px;
    height:200px;
    display:flex;
    justify-content:center;
    align-items: center;
}

css垂直水平居中常用方法代码示例

3783765528-5d525efa413e9.jpg

欢迎扫描二维码关注公众号,一起学习一起进步

关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看