6

我想将下面的 div 容器居中，以使该站点出现在页面的中心，而不管屏幕大小。

http://penarthpc.com/~droneboy/

我玩了一点，但似乎缺少一些东西。

4

8 回答 8

12

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

div.centered {
margin-left:auto;
margin-right:auto;
width:80%;
}
于 2013-08-29T12:35:32.003 回答
5

无论页面宽度如何，最简单的居中方法是margin: auto;在 CSS 中定义高度和宽度。

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

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

于 2013-08-29T12:32:14.980 回答
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;
}
于 2013-08-29T12:28:09.190 回答
1

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

margin: 0 auto;
于 2013-08-29T13:21:58.173 回答
1

如果要使容器居中（垂直）：

使用css垂直居中

如果（水平）看这个：

你如何轻松地水平居中-a-div

于 2013-08-29T12:47:48.303 回答
0

这是我使用的一个很好的方法，它使用一个before选择器来创建一个不可见的 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;
}

这可以在这篇文章中找到，它也有一个关于 jsbin 的演示！

于 2013-08-29T12:40:23.687 回答
0

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

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>

于 2018-10-22T17:22:30.240 回答
0

下面的 CSS 使任何元素居中：

div.className {

text-align: center;

}
于 2020-01-22T09:06:53.090 回答