Question

下面的CSS代码创建了一个可变宽度的矩形，距离浏览器左边缘250像素，距浏览器右边缘30像素。

如何创建一个固定宽度为1,000像素的矩形，以浏览器为中心（如果浏览器的宽度小于1,000像素，则刷新到屏幕的左侧）？

提前致谢，

学家W上。

.loginbackground {
position: absolute;
height: 73px;
left: 250px;
right: 30px;
top: 20px;
text-align: left;
margin-bottom: 3px;
padding: 0px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
font-weight: normal;
background: powderBlue;
}

Answer 1

将margin属性设置为0 auto会使div居中：

div {
    width  : 500px;
    height : 100px;
    margin : 0 auto;
}

这是一个jsfiddle：http://jsfiddle.net/jasper/dEdqk/

Answer 2

您可以使用 Flexbox 来实现它。你可以在这里找到一个很好的介绍：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.conatiner{
  background-color: #efefef;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

<div class="conatiner">
  <span>Centered</span>
</div>

制作漂浮在屏幕中心的固定宽度矩形

2 个答案: