Question

无论屏幕大小如何，我都希望将下面的div容器置于页面中心显示的位置。

我玩了一会儿，但似乎错过了一些东西。

Answer 1

此问题的解决方案是在CSS中为auto使用margin并为DIV本身提供一些宽度：

div.centered {
margin-left:auto;
margin-right:auto;
width:80%;
}

Answer 2

无论页面宽度如何，最简单的中心内容都是margin: auto;在CSS中，并定义了高度和宽度。

.class {
    height: 50px;
    width: 50px;
    margin: auto;
}

JSFiddle：http://jsfiddle.net/rVXBH/

Answer 3

.center-div {
   width: 600px;
   height: 600px;
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -300px;
   margin-top: -300px;
}

这将使您的DIV在水平和垂直方向上与班级center-div居中。 margin-left必须是宽度的一半。 margin-top必须是负半高。

水平居中：

.center-div {
   width: 600px;
   height: 600px;
   position: relative;
   margin-left: auto;
   margin-right: auto;
}

Answer 4

如果你想让容器居中（垂直）：

vertical centering with css

如果（横向）看这个：

how-do-you-easily-horizontally-center-a-div

Answer 5

简单。只需给出容器边距为“0 auto”

margin: 0 auto;

Answer 6

这是我使用的一个很棒的方法，它使用之前的选择器创建一个不可见的div来处理垂直对齐：

HTML：

<body> <div id="outter-div"> <div id="aligned"> <h1>A Nice Title</h1> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p> </div> </div> </body>

CSS：

/* This parent can be any width and height */ #outter-div { text-align: center; } /* The ghost, nudged to maintain perfect centering */ #outter-div:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; /* Adjusts for spacing */ } /* The element to be centered, can also be of any width and height */ #aligned{ display: inline-block; vertical-align: middle; width: 300px; }

这可以在this post上找到，它也有关于jsbin的演示！

Answer 7

以下代码适用于任何屏幕尺寸。

div.centered {
   background-color: rgb(18, 80, 144);
   height: 100vh;
}
div.centered span {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   color: rgb(250, 255, 255);
}

<div class="centered">
	<span>Center</span>
</div>

Answer 8

下面的CSS将所有元素居中：

div.className {

text-align: center;

}

无论屏幕大小如何，都将DIV居中到页面中心

8 个答案: