css 如何将DIV放置在浏览器的中心

bxgwgixi 于 2023-02-06 发布在其他

关注(0)|答案(3)|浏览(157)

我正在开发移动的应用程序。我有饼图和条形图，如何在浏览器窗口的中心放置一个固定大小的DIV。如果浏览器大小调整，我希望DIV调整它的位置。我试过了。实际上它的“R图”

<div id="output" ><canvas id="cvs" width="350" height="350" >[No canvas support]</canvas></div>

<script>
$(document).ready(function ()
    {
        var pie = new RGraph.Pie('cvs', [45,20,25,10])
            .set('colors', ['#F00', '#F00','#666','#ccc'])
            .set('events.click', myEventListener)
            .set('events.mousemove', function (e, piechart) {e.target.style.cursor = 'pointer';})
            .set('title.y', 30)
            .set('key', ['sunday','monday','tuesday','wednesday'])
            .set('key.colors', ['#f00', '#f00','#666','#ccc'])
            .set('key.interactive', true)
            .set('key.position', 'gutter')
            .set('gutter.left', 45)
            .set('key.position.y', 315)
            .set('key.rounded', false)
            .set('radius', 100)
            .set('linewidth', 1)
            .draw();
    })
</script>

<style>
#output {
width: 350px;
height: 350px;
background-color: none;
position: absolute;
top:0;
bottom: 40%;
left: 0;
right: 0;
margin: auto;
}

</style>

css

来源：https://stackoverflow.com/questions/23730551/how-to-place-a-div-in-the-center-of-the-browser

3条答案

按热度按时间

qojgxg4l1#

工作示例：http://jsfiddle.net/Gajotres/8kXWV/

HTML：

<div data-role="page" id="index">
    <div data-theme="b" data-role="header">
        <h1>Index page</h1>
    </div>

    <div data-role="content">
        <img src="http://images5.fanpop.com/image/photos/29500000/GamesRadar-Puppy-puppies-29566786-200-200.jpg" alt="image"/>
    </div>
</div>

JavaScript语言

function center(){
    w=$(window).width();
    h=$(window).height();

    img_w=$('img').width();
    img_h=$('img').height();

    pos_top=(h-img_h)/2; 
    pos_left=(w-img_w)/2;

    $('img').css({'top':pos_top,'left':pos_left+'px', position: "absolute"});
}

$(document).on('pageshow', '#index', function(){ center(); });
$( window ).on( "orientationchange resize", function( event ) {
    center();
});

CSS

.ui-content {
    position:absolute;
    top:40px;
    right:0;
    bottom:0;
    left:0;
}

赞(0）回复(0）举报 2023-02-06

edqdpe6u2#

将div放在Browser / Div的中心，即使在页面滚动时也是如此

你可以使用CSS将div放在中间，方法如下

#output{
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

要正常工作，此div（#output）必须具有固定的高度和宽度

赞(0）回复(0）举报 2023-02-06

u1ehiz5o3#

.center{
display: flex;
justify-content:center;
align-items: center;
width:100vw;
height:100vh;
background-color:white;
}

.obj{
background-color: black;
width:100px;
height: 100px;
display:flex;
justify-content:center;
align-items:center;
}

h4{
color:white;
}

<body>
  <div class="center">
    <div class="obj"><h4>Center</h4></div>
  </div>
</body>

赞(0）回复(0）举报 2023-02-06

我来回答

css 如何将DIV放置在浏览器的中心

3条答案

HTML：

JavaScript语言

CSS

将div放在Browser / Div的中心，即使在页面滚动时也是如此

相关问题

热门标签

最新问答