Javascript 在div内创建div始终位于页面中间

我正在制作一个有响应的图库页面，但被卡住了。我只想让我的

.gallery容器

在任意宽度的中间。右边有一个和左边不相等的间隙。有没有办法保持左右侧之间的间隙相等，以便图库div始终位于页面中间的任意宽度

如果有的话，对我会有很大帮助

---

这很复杂，因为我已经给了图片宽度，如果不给宽度，我就不能在链接a时显示更大的图片。所以，我所需要的就是把右边的一半空间也放到左边。我现在发现这是js的工作。如果你能帮我的话

.sj主要内容{
最大宽度：100%；
显示：块；
溢出：隐藏；
最小高度：300px；
}
h1{
字体大小：40px；
边缘底部：20px；
}
.画廊容器{
保证金：0；
}
保险商实验室{
列表样式：外部为方形；
/*利润率：0.20px 20px*/
}
.画廊名单{
列表样式：无；
浮动：左；
位置：相对位置；
右边距：25px；
宽度：360px；
边界：0；
}
李。画廊列表。col-lg-3。col-md-3。col-sm-6。col-xs-12：悬停。画廊标题{
背景：rgba（255255,1）；
}
.画廊名称{
位置：绝对位置；
左：50%；
底部：30px；
宽度：302px；
左边距：-151px；
文本对齐：居中；
背景：rgba（255，255，255，0.7）无重复滚动0；
边框：1px实心#fff；
填充：20px 10px；
}
.画廊名称h3{
字号：18px；
文本转换：无；
边缘底部：20px；
}
.sj阅读更多{
颜色：#000；
文字装饰：无；
文本转换：大写；
填充底部：16px；
位置：相对位置；
}
.sj阅读更多：之后{
内容：''；
宽度：60px；
高度：1px；
背景：#a4a4a5；
位置：绝对位置；
左：50%；
左边距：-30px；
底部：0；
过渡期：全部放松0.3秒；
-moz过渡：全部放松0.3秒；
-webkit过渡：全部缓解0.3秒；
}
.sj读取更多：悬停，.sj读取更多：焦点，.sj读取更多：活动{
颜色：#e45f4d；
文字装饰：无；
}
.sj阅读更多：悬停：之后{
宽度：100%；
左：0；
左边距：0；
底部：15px；
颜色：#e45f4d；
过渡期：全部放松0.3秒；
-moz过渡：全部放松0.3秒；
-webkit过渡：全部缓解0.3秒；
}

福托画廊




关于这张供访客使用的相册




关于这张供访客使用的相册




关于这张供访客使用的相册




关于这张供访客使用的相册




关于这张供访客使用的相册

使用以下代码：

    .sj-main-content-inner {
    width: 100%;
    margin: auto;
    display: block;
    overflow: hidden;
    min-height: 300px;
}
h1 {
    font-size: 40px;
    margin-bottom: 20px;
}
.gallery-container {
  max-width: 800px;
  height:100%;
  background: #000;
  margin:auto;
}
ul {
    list-style: square outside;
    /* margin: 0 0 20px 20px; */
}
.gallery-list {
    list-style: none;
    position: relative;
    width: 360px;
    margin:auto;
    border: 0;
}
li.gallery-list.col-lg-3.col-md-3.col-sm-6.col-xs-12:hover .gallery-title {
    background: rgba(255,255,255,1);
}
.gallery-title {
    position: absolute;
    left: 50%;
    bottom: 30px;
    width: 302px;
    margin-left: -151px;
    text-align: center;
    background: rgba(255, 255, 255, 0.7) none repeat scroll 0 0;
    border: 1px solid #fff;
    padding: 20px 10px;
}

.gallery-title h3 {
    font-size: 18px;
    text-transform: none;
    margin-bottom:20px;
}

.sj-read-more {
    color: #000;
    text-decoration: none;
    text-transform: uppercase;
    padding-bottom: 16px;
    position: relative;
}
.sj-read-more:after {
    content: '';
    width: 60px;
    height: 1px;
    background: #a4a4a5;
    position: absolute;
    left: 50%;
    margin-left: -30px;
    bottom: 0;
    transition: all ease-out 0.3s;
    -moz-transition: all ease-out 0.3s;
    -webkit-transition: all ease-out 0.3s;
}
.sj-read-more:hover, .sj-read-more:focus, .sj-read-more:active {
    color: #e45f4d;
    text-decoration: none;
}
.sj-read-more:hover:after {
    width: 100%;
    left: 0;
    margin-left: 0;
    bottom: 15px;
    color: #e45f4d;
    transition: all ease-out 0.3s;
    -moz-transition: all ease-out 0.3s;
    -webkit-transition: all ease-out 0.3s;
}

现在，为了让它更具响应性，请使用他的代码中的值，并将其添加到CSS结束的地方。作为参考，请使用此

无论何时，当你必须将身体置于中心位置时，请使用以下技巧：

<selector>{
    width:<x>px;
    margin:auto;
}

{
宽度：px；
保证金：自动；
}

您可以使用

margin-top

和

margin-bottom

下面的

margin:auto来指定上下页边距但一旦使用此代码，您就不能设置左边距或右边距。（但这样您就不需要设置左边距/右边距，因为您将div定位在中间）。
使用此代码：

    .sj-main-content-inner {
    width: 100%;
    margin: auto;
    display: block;
    overflow: hidden;
    min-height: 300px;
}
h1 {
    font-size: 40px;
    margin-bottom: 20px;
}
.gallery-container {
  max-width: 800px;
  height:100%;
  background: #000;
  margin:auto;
}
ul {
    list-style: square outside;
    /* margin: 0 0 20px 20px; */
}
.gallery-list {
    list-style: none;
    position: relative;
    width: 360px;
    margin:auto;
    border: 0;
}
li.gallery-list.col-lg-3.col-md-3.col-sm-6.col-xs-12:hover .gallery-title {
    background: rgba(255,255,255,1);
}
.gallery-title {
    position: absolute;
    left: 50%;
    bottom: 30px;
    width: 302px;
    margin-left: -151px;
    text-align: center;
    background: rgba(255, 255, 255, 0.7) none repeat scroll 0 0;
    border: 1px solid #fff;
    padding: 20px 10px;
}

.gallery-title h3 {
    font-size: 18px;
    text-transform: none;
    margin-bottom:20px;
}

.sj-read-more {
    color: #000;
    text-decoration: none;
    text-transform: uppercase;
    padding-bottom: 16px;
    position: relative;
}
.sj-read-more:after {
    content: '';
    width: 60px;
    height: 1px;
    background: #a4a4a5;
    position: absolute;
    left: 50%;
    margin-left: -30px;
    bottom: 0;
    transition: all ease-out 0.3s;
    -moz-transition: all ease-out 0.3s;
    -webkit-transition: all ease-out 0.3s;
}
.sj-read-more:hover, .sj-read-more:focus, .sj-read-more:active {
    color: #e45f4d;
    text-decoration: none;
}
.sj-read-more:hover:after {
    width: 100%;
    left: 0;
    margin-left: 0;
    bottom: 15px;
    color: #e45f4d;
    transition: all ease-out 0.3s;
    -moz-transition: all ease-out 0.3s;
    -webkit-transition: all ease-out 0.3s;
}

现在，为了让它更具响应性，请使用他的代码中的值，并将其添加到CSS结束的地方。作为参考，请使用此

无论何时，当你必须将身体置于中心位置时，请使用以下技巧：

<selector>{
    width:<x>px;
    margin:auto;
}

{
宽度：px；
保证金：自动；
}

您可以使用
margin-top
和
margin-bottom
下面的
margin:auto来指定上下页边距但一旦使用此选项，您就不能设置左边距或右边距。（但这样您就不需要设置左边距/右边距，因为您将div定位在中间）。
使用jquery解决了此问题

$(function() {
function updateDivPosition() {
var myWidth = $( '.gallery-title' ).width(), myHeight = $( '.gallery-title' ).height();
$( '.gallery-title' ).css( { 
marginLeft: -( parseInt( myWidth, 10 ) / 2 ) + 'px',
marginTop: -( parseInt( myHeight, 10 ) / 2 ) + 'px'
});
}
updateDivPosition(); // first time set correct position on onload
$( window ).resize( updateDivPosition ); // update on window resize
});        

使用jquery解决问题

$(function() {
function updateDivPosition() {
var myWidth = $( '.gallery-title' ).width(), myHeight = $( '.gallery-title' ).height();
$( '.gallery-title' ).css( { 
marginLeft: -( parseInt( myWidth, 10 ) / 2 ) + 'px',
marginTop: -( parseInt( myHeight, 10 ) / 2 ) + 'px'
});
}
updateDivPosition(); // first time set correct position on onload
$( window ).resize( updateDivPosition ); // update on window resize
});        

谢谢，但我在使用代码时没有发现任何更改。@SusHill我会遇到问题的给我一分钟时间我会编辑我的回答这很复杂，因为我为图像指定了宽度，而没有指定宽度，我无法在转到链接
a
时显示更大的图像。所以，我所需要的就是把右边的一半空间也放到左边。我现在发现这是js的工作。如果你能帮我的话。谢谢，但是我在使用代码时没有发现任何更改。@我会解决问题的，给我一分钟时间，我会编辑我的回答。这很复杂，因为我给了图像的宽度，没有给宽度，我无法在转到链接
a
时显示更大的图像。所以，我所需要的就是做h