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

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

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

当前回答

我在看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

其他回答

如果你正在研究新的浏览器(IE10+)，

然后你可以使用transform属性在中心对齐一个div。

<div class="center-block">this is any div</div>

这个的css应该是:

.center-block {
  top:50%;
  left: 50%;
  transform: translate3d(-50%,-50%, 0);
  position: absolute;
}

这里的问题是，您甚至不必指定div的高度和宽度，因为它会自行处理。

同样，如果你想把一个div放在另一个div的中心，那么你可以指定外部div的相对位置，然后这个CSS开始为你的div工作。

工作原理:

当您将left和top指定为50%时，div将位于页面的右下四分之一，其左上端固定在页面的中心。这是因为，左/顶部属性(当以%给出时)是基于外部div(在您的情况下，窗口)的高度计算的。

但是transform使用元素的高度/宽度来决定转换，因此div将向左移动(50%宽度)和向上移动(50%高度)，因为它们是以负号给出的，因此将其对齐到页面的中心。

如果你必须支持旧的浏览器(抱歉，包括IE9)，那么表格单元格是最流行的方法。

2015-07-26 17:38:31

这个解决方案对我很有效

    .middleDiv{
        position : absolute;
        height : 90%;
        bottom: 5%;
    }

(或高度:70% /底部:15%

高度:40% /底部:30%…)

2012-08-24 14:03:22

div { 位置:绝对的; 上图:50%; 左:50%; 转换:翻译(-50%，-50%); -ms-transform: -50%， -50%;/*即9 */ -webkit-transform (-50%， -50%);/* Chrome, Safari, Opera */ ｝ <身体> <div> div要垂直对齐 < /身体>

位置:主体文档中的绝对div

有位置的元素:绝对的;相对于最近的定位祖先(而不是相对于视口(主体标记)，像固定的那样)定位。

然而;如果绝对定位元素没有定位父元素，它将使用文档主体，并随着页面滚动而移动。

来源:CSS位置

2017-09-23 02:17:30

在父元素上使用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

我喜欢的方法是将一个盒子垂直和水平居中，是以下技术:

外容器

应有显示:表;

内容器

应该有display: table-cell; 应该有垂直对齐:中间; 应该有text-align: center;

内容框

应该有显示:inline-block; 应该重新调整水平文本对齐，如。text-align:左;或者text-align: right;，除非你想让文本居中

这种技术的优雅之处在于，你可以将你的内容添加到内容框中，而不用担心它的高度或宽度!

Demo

body { margin : 0; } .outer-container { position : absolute; display: table; width: 100%; /* This could be ANY width */ height: 100%; /* This could be ANY height */ background: #ccc; } .inner-container { display: table-cell; vertical-align: middle; text-align: center; } .centered-content { display: inline-block; text-align: left; background: #fff; padding : 20px; border : 1px solid #000; } <div class="outer-container"> <div class="inner-container"> <div class="centered-content"> You can put anything here! </div> </div> </div>

看看这小提琴!

EDIT

是的，我知道你可以通过transform实现或多或少相同的灵活性:translate(-50%， -50%);或者transform: translate3d(-50%，-50%， 0);，我建议的技术有更好的浏览器支持。即使使用浏览器前缀，如-webkit， -ms或-moz, transform也不能提供完全相同的浏览器支持。

所以如果你关心旧的浏览器(例如。IE9及以下版本)，您不应该使用transform进行定位。

2016-02-25 23:22:01

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

推荐文章

最新文章

标签