引导 div 中的中心 div 水平和垂直（ASP.NET）

Posted 2023-03-06

【中文标题】引导 div 中的中心 div 水平和垂直（ASP.NET）

【英文标题】：Center div in bootstrap div horizontally and vertically(ASP.NET)

【发布时间】：2017-09-19 23:54:02

【问题描述】：

我有带有引导类的 div 这是代码

  <div class="col-lg-12">
                <div style="text-align: center; width: 50%; font-size: 20px; display: inline-block; position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;">
                        <p>
                            The latest offered radiology management systems are capable of helping the radiologists to provide exacting digital images and data. Viewing different types of images from various examinations is very convenient with this particular software. Through multiple viewing processes, it is possible to view the images while other people are seeing them. Viewing the imagery is satisfying because of the impressive features of the software.
                        </p>
                    </div>
               </div>

我需要将这个 div 垂直和水平居中

<div style="text-align: center; width: 50%; font-size: 20px; display: inline-block; position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;">

我试试这种风格

style="text-align: center; width: 50%; font-size: 20px; display: inline-block; position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;"

但它不是垂直居中，而是水平居中。

我的错误在哪里？

【参考方案1】：

<div class="col-lg-12">
        <div style="text-align: center;min-width: 50%;max-width:100%; font-size: 20px; display: inline-block; top: 0;left: 0;bottom: 0;right: 0;position: absolute; margin-top:20%; margin-bottom:20% ">
           <p>
                The latest offered radiology management systems are capable of helping the radiologists to provide exacting digital images and data. Viewing different types of images from various examinations is very convenient with this particular software. Through multiple viewing processes, it is possible to view the images while other people are seeing them. Viewing the imagery is satisfying because of the impressive features of the software.
            </p>
        </div>
    </div>

【参考方案2】：

试试这个代码：

 <div class="col-lg-12">
  <div style="text-align: center;min-width: 50%;max-width:100%; font-size: 20px; display: inline-block; top: 0;left: 0;bottom: 0;right: 0;position: absolute;margin:30%;">
   <p>
    The latest offered radiology management systems are capable of helping the radiologists to provide exacting digital images and data. Viewing different types of images from various examinations is very convenient with this particular software. Through multiple viewing processes, it is possible to view the images while other people are seeing them. Viewing the imagery is satisfying because of the impressive features of the software.
   </p>
  </div>
 </div>