如果有最小宽度，如何使元素居中（水平）固定位置？

I have following codes:

我有以下代码：

div{
	position: fixed;
	border: solid 1px #aaa;
	top: 20px;
	right: 50%;
	margin-right: -20%;
	width: 40%;
	min-width: 250px;
	text-align: center;
}

<div> This element should be center (horizontally) in all screen-sizes </div>

<div> (in the code above) is center when its width is more than 250px. But when I decrease the size of screen and min-width: 250px; executes, then it is not center anymore.

（在上面的代码中）当宽度超过250px时是中心。但是当我减小屏幕尺寸和最小宽度时：250px;执行，然后它不再是中心。

How can I keep it center in all-screen-sizes?

如何将其保持在所有屏幕尺寸的中心？

Note: (legacy browser support) crossing browsers is important for me.

注意：（传统浏览器支持）跨浏览器对我来说很重要。

3 个解决方案

#1

You can use left: 50% and transform: translate(-50%, 0);

你可以使用left：50％和transform：translate（-50％，0）;

div{
  position: fixed;
  border: solid 1px #aaa;
  top: 20px;
  width: 40%;
  min-width: 250px;
  text-align: center;
  left: 50%;
  transform: translate(-50%, 0);
}

<div> This element should be center (horizontally) at all screen-sizes </div>

Or you can use JQuery

或者你可以使用JQuery

$(window).on("resize", function () {
  var half = $('div').width()/2;
  $('div').css('margin-left', -half);
}).resize();

div{
  position: fixed;
  border: solid 1px #aaa;
  top: 20px;
  width: 40%;
  min-width: 250px;
  text-align: center;
  left: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div> This element should be center (horizontally) at all screen-sizes </div>

#2

you have to use margin:auto; property. Simply set the width of the div with percentage and set the margin to auto and it will be automatically center positioned when re-sizing the window.

你必须使用保证金：auto;属性。只需使用百分比设置div的宽度，并将边距设置为auto，并在重新调整窗口大小时自动居中定位。

if you want to keep your div fixed then you can simply use percentage in margin.

如果你想保持你的div固定，那么你可以简单地使用保证金百分比。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
    .fixedCenter {height:200px;
                    width:60%;
                    background-color:green;
                    position:fixed;
                    margin:10px 20%;}
</style>
</head>

<body>
    <div class="fixedCenter">


    </div> 
</body>
</html>

#3

The best way:

最好的办法：

div{
    position: fixed;
    border: solid 1px #aaa;
    top: 20px;
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    width: 40%;
    min-width: 250px;
    text-align: center;
}

<div> This element should be center (horizontally) in all screen-sizes </div>

#1