垂直居中 - 位置：绝对不工作

Posted 2023-03-05

【中文标题】垂直居中 - 位置：绝对不工作

【英文标题】：Centering vertically - Position: absolute not working

【发布时间】：2017-07-16 03:34:50

【问题描述】：

我在尝试将 div 垂直居中时遇到问题。根据我的阅读，我尝试使用flexbox 但失败了，然后我尝试使用position: absolute 但也失败了，例如 html：

<div="parent">
 <div="child">
  <h1>Hello World</h1>
  <h3>This is a subtitle</h3>
 </div>
</div>

CSS：

 .parent
    position: relative;
  

 .child
    position: absolute;
    top: 50%;
    transform: translateY(50%);
  

从我一直在阅读的内容来看，这应该可以工作，所以这是我的实际代码，希望你们能找到解决我问题的方法。

HTML：

<section class="mainSection">
    <div class="container">
        <div class="row">
            <div class="col-md-8">

           <!-- THIS IS THE SECTION THAT I CAN'T GET TO WORK -->
                  <div class="mainSection-mainTitleWrapper">
                    <div class="mainSection-mainTitle">
                        <h1>Creating value</h1>
                        <h3>Through quality assets</h3>
                    </div>
                  </div>
          <!-- THIS IS THE END OF THE SECTION THAT I CAN'T GET TO WORK -->


            </div>
            <div class="col-md-4">
                <div class="contactForm">
                    <h4>Buy, Sale & Rent</h4>
                    <p>Lorem ipsum is simply dummy text of the printing and typesetting industry. Lorem ipsum has been the industry's standard dummy text.</p>
                    <form>
                        <input type="text" name="user_name" placeholder="FULL NAME">
                        <input type="emial" name="user_email" placeholder="EMAIL">
                        <input type="tel" name="user_phone" placeholder="PHONE">
                        <select>
                            <option value="buy">BUY</option>
                            <option value="sale">SALE</option>
                            <option value="rent">RENT</option>
                        </select>

                        <select>
                            <option value="price" disabled selected>PRICE</option>
                            <option><$100,000.00</option>
                            <option><$200,000.00</option>
                            <option><$400,000.00</option>
                            <option><$600,000.00</option>
                            <option><$1,000,000.00</option>
                        </select>

                        <input type="submit" name="find" value="FIND NOW">
                    </form>
                </div>  
            </div>  
        </div>
    </div>
</section>

CSS：

.mainSection
   background: url('img/background.jpg') no-repeat center center;
   background-size: cover;
   box-shadow: inset 0 0 0 1000px rgba(0,0,0,0.4);
   padding-bottom: 50px;    


.mainSection-mainTitleWrapper
   position: relative;



.mainSection-mainTitle
   position: absolute;
   top: 50%;
   transform: translateY(-50%);


.mainSection-mainTitle h1
   font-size: 65px;
   color: #fff;
   font-weight: bold;
   text-transform: uppercase;


.mainSection-mainTitle h3
   font-size: 35px;
   color: #fff;
   font-weight: bold;
   text-transform: uppercase;

抱歉这个冗长的问题，但是有没有人知道为什么它不起作用或另一种可能的解决方案将 .mainSection-mainTitle div 垂直居中？

【问题讨论】：

查看***.com/questions/396145/…

您的主要问题可能是您没有为父 div 添加设置的高度。看我的回答。

可能重复：How to Center Elements Vertically and Horizontally in Flexbox

【参考方案1】：

垂直对齐中间有效，但您必须在父元素上使用 table-cell 并在子元素上使用 inline-block。

此解决方案不适用于 IE6 和 7。

经典解决方案（表格布局）

看看这个小提琴：

http://jsfiddle.net/mcSfe/

---

测试：

FF3.5 FF4 Safari 5 铬 11 和 12 IE9

---

HTML

你的父 div 必须有一个设定的高度。否则孩子不会知道什么是 50% 的虚无。

<div class="cn">
    <div class="inner">your content</div>
</div>

CSS

.cn 
  display: table-cell;
  width: 500px;
  height: 500px;
  vertical-align: middle;
  text-align: center;


.inner 
  display: inline-block;
  width: 200px; height: 200px;

---

现代解决方案（转换）

由于现在 (http://caniuse.com/#search=2d%20transforms) 对转换的支持相当好，因此有一种更简单的方法。

CSS

.cn 
  position: relative;
  width: 500px;
  height: 500px;


.inner 
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 200px;
  height: 200px;

看这里：

http://jsfiddle.net/0tc6ycvo/1/

【讨论】：

谢谢！主要问题是我没有给它一个高度。我曾尝试过 height:100% 但仍然没有用。所以我不得不给它 px 。

@ÓscarAguayo，这就是您的身高百分比不起作用的原因：***.com/a/31728799/3597276

谢谢@Michael_B，真的很有帮助！