实现盒子水平居中，关于定位的问题

最新推荐文章于 2023-11-03 10:33:06 发布

JAVA小镇V

最新推荐文章于 2023-11-03 10:33:06 发布

阅读量2.3k

点赞数 1

文章标签： css3

本文链接：https://blog.csdn.net/lin74love/article/details/62900040

版权

前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

如何实现一个盒子水平居中

<!DOCTYPE html>
<html>
<head>
    <title>Demo4</title>
</head>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .container{
        position: absolute;
        width: 400px;
        height: 200px;
        top:50%; 
        left:50%; 
        margin-top:-100px; 
        margin-left:-200px;
        border: 1px solid;
        background-color: #ccc;
    }
    #quartercircletop{
    width: 50px;
    height: 50px;
    background-color: #fc0;
    border-radius: 0 0 50px 0;
    position: absolute;
    }
    #quartercirclebotton{
    width: 50px;
    height: 50px;
    background-color: #fc0;
    border-radius: 50px 0 0 0;
    position: absolute;
    /*top: 150px;
    left: 350px;*/
    //利用top、left实现定位或者利用margin填充两者皆可
    //建议使用margin
    margin-top: 150px;
    margin-left: 350px;
    }
</style>
<body>
<div class="container">
    <div id="quartercircletop"></div>
    <div id="quartercirclebotton"></div>
</div>
</body>
</html>

还有一种方法能够实现居中，利用css3的transform属性旋转

.center{
background:#ccc;
width:400px;
height:200px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
//利用旋转实现居中
}

演示Demo

JAVA小镇V

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
实现盒子水平居中，关于定位的问题

如何实现一个盒子水平居中<!DOCTYPE html><html><head> <title>Demo4</title></head><style type="text/css"> *{ margin: 0; padding: 0; } .container{ position: absolute;
复制链接

扫一扫