更新的答案

Question

最近我正在为我的网站创建一个搜索框，但我希望它能够始终集中在每个y和x维度。

我有div容器var fruits = {}; var props = ['orange', 'apple', 'banana']; for (var i = 0; i < props.length; i++) { fruits[props[i]] = 'Juice'; //----^^^^^^^^^^----- } console.log(fruits);：

searchbox

在.searchbox { position: absolute; text-align: center; width: 100%; left: 0%; top: 55px; height: 115px; background-color: black; }容器内部，我制作了特殊的searchbox容器：

mover

正如你所看到的宽度是50％，因为我认为它会使它居中，但它没有，并且保证金是自动的，我认为即使在没有50％宽度的情况下工作也是如此。

Full code和Result。

我认为我的风格有点乱，有些无用的东西可能会影响自动保证金。问题可能是什么？ .mover { margin: 0 auto; width: 50%; }不能与div的当前位置一起使用吗？我需要改变什么？如果没有，问题是什么？

如果你在当前的小提琴上传解决方案，我将非常感激。

Answer 1

更新的答案

这是正确的代码：https://jsfiddle.net/uda77168/7/

首先...

1。删除了所有absolute，top，left，right，bottom CSS属性。
原因：绝对定位通常是一件坏事，因为它会给网站带来无响应的布局。
2。我还删除了float CSS属性 原因： float并不错，但如果您使用的是flexbox则不需要。 3。设置.search {width: 100%}
原因：使搜索栏更大。
4。删除了#condition和#stattrack的宽度属性 5. 使利润率更加一致 6。在<label>之前放置<select>。

垂直居中

1。 <body>是将垂直居中的Flexbox。为了实现这一目标，必须定义width和height <html>和<body>。

html, body {
    width:100%;
    height:100%;
}
body {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

2. 接下来，我们需要将<body>定义为flexbox并为其提供一些Flexbox属性：

body {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

您可以从here复制粘贴上面的Flexbox代码。

水平居中

1。在.statbox，.conbox和.rarbox周围创建一个div，然后给它一个宽度并使其成为弹性框（再次，flexbox）代码被复制）：

<div class="horizontal-flexbox"></div>

.horizontal-flexbox {
    width: 100%;
    display: flex;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

2。我还将.statbox，.conbox和.rarbox各设为33.3％宽。加在一起，即99.9％ - 仅低于100％。

.horizontal-flexbox > div {
   width: 33.3%;
   margin-top: 10px;
}

3。我还包括其他一些内容，但这并不重要。确保你学习flexbox，它真的很有用！

Answer 2

您的input.search类在px中的指定宽度大于容器。

.search {
    width: 100%;/*changed this line*/
    height: 35px;
    margin-top: 20px;
    margin-left: 0 auto;
    margin-right: 0 auto;
    border: solid 1px black;
    border-radius: 7px;
}

但是，在不同的屏幕分辨率下查看时，使用百分比会导致不可预测的布局。

Answer 3

使用此：

.searchbox {
    display:flex;
    display:-webkit-flex;
    justify-content:center;
    -webkit-justify-content:center;
    align-items:center;
    -webkit-align-items:center;
}

和

.mover{width:50%;}

自动边距不是div中的中心元素

3 个答案:

更新的答案

首先...

垂直居中

水平居中