<div>在页面上垂直和水平居中的最佳方法?

<div>元素在页面中垂直和水平的最佳方法?

我知道左边距:auto;margin-right:汽车;会以水平方向为中心，但是垂直方向的最佳方法是什么呢?

当前回答

利用Flex显示的简单解决方案

 <div style = 'display:flex; position:absolute; top:0; bottom:0; right:0; left:0; '>
      <div id = 'div_you_want_centered' style = 'margin:auto;'> 
           This will be Centered 
      </div>
 </div>

查看http://css-tricks.com/snippets/css/a-guide-to-flexbox/

第一个div占据了整个屏幕，并有一个针对每种浏览器的显示:flex集。第二个div(居中div)充分利用了显示:flex div，其中margin:auto工作出色。

注意兼容IE11+。(IE10 w/ prefix)。

2015-01-09 20:58:07

其他回答

下面是我之前写的一个脚本(它是用jQuery库写的):

var centerIt = function (el /* (jQuery element) Element to center */) {
    if (!el) {
        return;
    }
    var moveIt = function () {
        var winWidth = $(window).width();
        var winHeight = $(window).height();
        el.css("position","absolute").css("left", ((winWidth / 2) - (el.width() / 2)) + "px").css("top", ((winHeight / 2) - (el.height() / 2)) + "px");
    }; 
    $(window).resize(moveIt);
    moveIt();
};

2008-12-10 17:16:16

我在看Laravel的视图文件，注意到他们完美地将文本居中。我立刻想起了这个问题。他们是这样做的:

<html>
<head>
    <title>Laravel</title>

    <!--<link href='//fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>-->

    <style>
        .container {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            display: table;

        }

        .inside {
            text-align: center;
            display: table-cell;
            vertical-align: middle;
        }


    </style>
</head>
<body>
    <div class="container">
            <div class="inside">This text is centered</div>
    </div>
</body>

结果如下所示:

2015-03-24 20:19:50

在父元素上使用display:grid并将margin:auto设置为居中元素即可:

请看下面的片段:

html,身体{ 宽度:100%; 高度:100%; 保证金:0; 填充:0; ｝ .container { 显示:网格; 高度:90%; 背景颜色:蓝色; ｝ .content { 保证金:汽车; 颜色:白色; ｝ < div class = "容器" > <div class="content"> cented div here</div> < / div >

2017-08-17 08:39:48

抱歉回复晚了最好的办法是

  div {
      position: fixed;
      top: 50%;
      left: 50%;
      margin-top: -50px;
      margin-left: -100px;
    }

上边距和左边距应该根据你的div框大小

2013-10-16 14:58:45

2018年使用CSS网格的方式:

.parent{
    display: grid;
    place-items: center center;
}

检查浏览器的支持，Caniuse建议它适用于Chrome 57、FF 52、Opera 44、Safari 10.1和Edge 16。我没有检查自己。

请看下面的片段:

.parent { 显示:网格; 放置物品:中心中心; /*place-items是align-items和justification -items的简写*/ 身高:200 px; 边框:1px纯黑色; 背景:gainsboro; ｝ .child { 背景:白色; ｝ < div class = "父" > < div class = "孩子" >为中心!< / div > < / div >

2018-01-28 10:15:23

<div>在页面上垂直和水平居中的最佳方法?

推荐文章

最新文章

标签