html - 在 block 内联 div 中居中图像

Question

我已经尝试了我在互联网上可以找到的所有方法来使 div 内的图像垂直居中，但没有任何效果。有谁知道肯定有用的东西？任何帮助将不胜感激，

谢谢!

我无法使给定的解决方案起作用。我认为可能是 div 的内联 block 性质影响了它。

var to_add = "<div style='width:600px;width:100%'>"

//far left stims
to_add += "<div style='height:450px; width:200px; text-align:center;display:inline-block;border: 2px solid black;vertical-align:middle;'>";

to_add+="<br>"

var wrapper = $("<div id='jspsych-single-stim-upper-left' style='vertical-align:middle;'> </div>");
wrapper.html(trial.a_path_upper_left_stim);
to_add+= wrapper.html();

to_add+="<br>" //because I couldn't get top and bottom margins to work
to_add+="<br>"
to_add+="<br>"
to_add+="<br>"


var wrapper = $("<div id='jspsych-single-stim-lower-left' style='vertical-align:middle'> </div>");
wrapper.html(trial.a_path_lower_left_stim);
to_add+= wrapper.html();

to_add+="</div>"

//middle stim
to_add += "<div style='height:450px; width:200px;border: 2px solid black;display:inline-block;text-align:center;vertical-align:middle;'>";

to_add+="<br>"
// display stimulus

var wrapper = $("<div id='jspsych-single-stim-middle' style=' vertical-align: middle'> </div>");
wrapper.html(trial.a_path_middle_stim);
to_add+= wrapper.html();


to_add+="</div>"

//far right stims

to_add += "<div style='height:450px; width:200px; text-align:center;display:inline-block;border: 2px solid black;vertical-align:middle'>";

var wrapper = $("<div id='jspsych-single-stim-upper-right style='vertical-align:middle' > </div>");
wrapper.html(trial.a_path_upper_right_stim);
to_add+= wrapper.html();

to_add+="<br>"
to_add+="<br>"
to_add+="<br>"
to_add+="<br>"

var wrapper = $("<div id='jspsych-single-stim-lower-right' style='vertical-align:middle'> </div>");
wrapper.html(trial.a_path_lower_right_stim);
to_add+= wrapper.html();

to_add+="</div>"
to_add+="</div>"


display_element.append(to_add);

Answer 1

如何定位它 50% 50%？

background-position: 50% 50%;

.center-background {
  background-image: url("https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300");
  width: 600px;
  height: 500px;
  background-repeat: no-repeat;
  border: 5px solid fireBrick;
  background-position: 50% 50%;
}

<div class="center-background"></div>