在 div 中垂直对齐 [重复]

Posted 2023-03-05

【中文标题】在 div 中垂直对齐 [重复]

【英文标题】：Vertically aligned in a div [duplicate]

【发布时间】：2017-03-03 19:00:08

【问题描述】：

我很抱歉发布另一个垂直对齐问题，但由于我是一个完全的初学者，我不知道还能做什么。

我有一个全屏背景图像，我想垂直对齐 h1、p 和按钮部分，所以无论屏幕高度是多少，文本块都应该始终居中。我试图通过在该部分添加 margin-top 来实现这一点，但这并不完美。我正在使用 Bootstrap。

这是我的 html：

<section id="home">
    <div class="container">
        <div class="row">

            <div class="col-md-6">
                <h1>dolm it</h1>
                <p>Dolm IT is modern design & development agency from Estonia with main focus on complex web systems. We have a really kickass team whose main focus is UI/UX, php, Java, AngularJS, HTML & CSS.</p>
                <button type="button" class="btn btn-default white">more</button>
            </div>
        </div>
    </div>
    <!--end container-->
</section>
<!--end home-->

这是我创建的 CSS：

       #home 
            background: -webkit-linear-gradient( rgba(14, 124, 132, 0.8), rgba(14, 124, 132, 0.8)), url(../img/landing_bg.jpg) no-repeat 0 30% fixed;
            background: linear-gradient( rgba(14, 124, 132, 0.8), rgba(14, 124, 132, 0.8)), url(../img/landing_bg.jpg) no-repeat 0 30% fixed;
            background-size: cover;
            width: 100%;
            height: 100vh;
        

        #home h1 
            color: #ffffff;
            font-family: 'Akrobat-ExtraBold';
            font-size: 4.9rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 32px;
        

        #home p 
            color: #ffffff;
            font-family: 'Akrobat-Bold';
            font-size: 1.5rem;
        

        #home .col-md-6 
            margin-top: 200px;
            padding: 130px 0 130px 0;
        

你可以看到测试页面here。感谢您的帮助。

【问题讨论】：

检查这个：***.com/questions/2743989/…

感谢您的回复和链接。我设法实现了我想要的。由于我是新手，我自己找不到这个解决方案。

【参考方案1】：

您可以使用 display:table 或 display:table 和 flex 的混合（如果想法是在几行上缩小 p） example：

#home 
   background: -webkit-linear-gradient( rgba(14, 124, 132, 0.8), rgba(14, 124, 132, 0.8)), url(../img/landing_bg.jpg) no-repeat 0 30% fixed;
   background: linear-gradient( rgba(14, 124, 132, 0.8), rgba(14, 124, 132, 0.8)), url(../img/landing_bg.jpg) no-repeat 0 30% fixed;
   background-size: cover;
   width: 100%;
   min-height: 100vh;/* modified */
   /* added from here ============================ */
   display:flex;
   flex-flow:column;
   align-items:center;
   justify-content:center;
   text-align:center;/* optionnal, but not the job of justify-content *nor align-items */
 
body /* + optionnal*/ , h1, p 
  margin:0;

.container 
  display:table;
  width:1%;/* will shrink to fit the wider content */

 #home h1 
   white-space:nowrap;/* keep it on one line and make container same width */
 
/* ================ end added */
 #home h1 
   color: #ffffff;
   font-family: 'Akrobat-ExtraBold';
   font-size: 4.9rem;
   text-transform: uppercase;
   letter-spacing: 2px;
   white-space:nowrap;
 
 
 #home p 
   color: #ffffff;
   font-family: 'Akrobat-Bold';
   font-size: 1.5rem;
   display:table;
 
 
 #home .col-md-6 
   /* CSS removed here */
 

<section id="home">
  <div class="container">
    <div class="row">

      <div class="col-md-6">
        <h1>dolm it</h1>
        <p>Dolm IT is modern design & development agency from Estonia with main focus on complex web systems. We have a really kickass team whose main focus is UI/UX, PHP, Java, AngularJS, HTML & CSS.</p>
        <button type="button" class="btn btn-default white">more</button>
      </div>
    </div>
  </div>
  <!--end container-->
</section>
<!--end home-->

查看 CSS 中的评论以了解新增或删除的内容:)

对于旧版浏览器，只有 display:table 版本：http://codepen.io/anon/pen/JRwOaV

html 
  height: 100%;
  width: 100%;
  display: table;

body 
  display: table-row;

#home 
  display: table-cell;
  background: -webkit-linear-gradient(rgba(14, 124, 132, 0.8), rgba(14, 124, 132, 0.8)), url(../img/landing_bg.jpg) no-repeat 0 30% fixed;
  background: linear-gradient(rgba(14, 124, 132, 0.8), rgba(14, 124, 132, 0.8)), url(../img/landing_bg.jpg) no-repeat 0 30% fixed;
  background-size: cover;
  width: 100%;
  height: 100vh;
  vertical-align: middle;

body,
h1,
p 
  margin: 0;

#home h1 
  white-space: nowrap;
  /* keep it on one line and make container same width */
  color: #ffffff;
  font-family: 'Akrobat-ExtraBold';
  font-size: 4.9rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  white-space: nowrap;

#home p 
  color: #ffffff;
  font-family: 'Akrobat-Bold';
  font-size: 1.5rem;
  display: table;

#home .col-md-6 
  display: table;
  /* again to shrink content on itself*/
  width: 1%;
  margin: auto;
  text-align: center;

<section id="home">
  <div class="container">
    <div class="row">

      <div class="col-md-6">
        <h1>dolm it</h1>
        <p>Dolm IT is modern design & development agency from Estonia with main focus on complex web systems. We have a really kickass team whose main focus is UI/UX, PHP, Java, AngularJS, HTML & CSS.</p>
        <button type="button" class="btn btn-default white">more</button>
      </div>
    </div>
  </div>
  <!--end container-->
</section>
<!--end home-->