2个响应式div，一个div中间有按钮[重复]答案

【问题标题】：2 responsive div with button in the middle of one div [duplicate]2个响应式div，一个div中间有按钮[重复]
【发布时间】：2021-09-21 14:58:26
【问题描述】：

您好，请看下图

在这里，我想让第一个 div 的按钮位于 div 的垂直中间，并且我想让 2 div 也响应。请看我的代码。

我尝试使用负边距使其居中，但仍然没有运气。请帮忙。

.but-new{
margin-top:-20px;
}
.nm-1{
    margin-top: -212px;
    margin-left: 133px;
    border-radius: 2px;
}

.all-bb{
display: block;
width: 100%;
overflow: hidden;
margin-top:22px;

}
.main-img{
  background-image: url('https://i.postimg.cc/hGFfjpLM/NEW-2.jpg');
  height: 400px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
background-repeat: no-repeat;
max-width: 890px;
overflow: hidden;
}


.b-h2 {
    text-align: center !important;
    font-family: 'Montserrat', sans-serif !important;
    color: #383e40 !important;
    font-size: 24px !important;
     font-weight: 400 !important;
    margin: 0 0 0 0 !important;
    padding-top: 13px !important;
    text-transform: uppercase !important;
   padding-bottom: 10px !important;
}

.con-righ{
  color:white;
  display: inline-block;
  max-width:90%;
background: #000000ab;
    padding: 36px;
    border-radius: 6px;
}

.con-left{
  color:white;
  display: inline-block;
  max-width:90%;
background: #000000ab;
    padding: 36px;
    border-radius: 6px;
}
.new-h4 {
 color: white;
 
 text-transform: uppercase;
 font-family: 'Montserrat', sans-serif;
font-size: 32px;
    line-height: 36px;
    font-weight: 400;
    margin: 0 0 0 0;
}
.con-righ p{
    font-size: 17px;
    padding-top: 17px;
    padding-bottom: 17px;
    line-height: 25px;
  padding-right: 23px
}

.but-red{
    padding: 15px;
    border-radius: 5px;
    background-color: #ff0000;
    color: white !Important;
    width: max-content;
    font-size: 15px;
    text-decoration: unset;
    transition: .3s all;
    overflow: hidden;
    display: block;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<div class="container">
<div class="all-bb">

<div class="arri-light col-sm-12 col-md-4">

 <img src="https://i.ibb.co/jH5bTZ6/NEW-1.jpg"> 
 <a class="but-red but-new" href="#"> View  Projects</a>

</div>


<div class="main-img col-sm-12 col-md-8">
  <div class="con-righ">
     <h4 class="new-h4">LOREM IPSUM</h4>
     <p>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore

 </p>
     <a class="but-red" href="#"> View  Projects</a>
  </div>

</div></div></div>

在第一个 div 部分我有另一个图像。这样我可以在小图像不适合时替换它。

【问题讨论】：

标签： html css twitter-bootstrap flexbox

【解决方案1】：

试试这个....

我添加了这个 CSS 以使第一个 div 的按钮位于 div 的垂直和水平中心。

.but-new {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform:translate(-50%, -50%); 
}

DEMO

【讨论】：

【解决方案2】：

这些是 2 个简单的响应式示例，将 Div 中间的按钮居中。您可以在任何地方使用 div。希望对你有帮助:)

.container1{
  border:1px solid red;
  padding:30px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.container2{
  border:1px solid green;
  padding:30px;
  display:block;
  position:relative;
}

.container2 .btn {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}


.mb-sm{margin-bottom:60px;}

<div class="container1 mb-sm">
  <button>Example1</button>
</div>


<div class="container2">
  <button class="btn">Example2</button>
</div>

【讨论】：