Div居中在屏幕正中间

Posted 2023-05-17

参考技术A 一、用margin负值，这种方法适合div的宽高固定。

position:absolute;

left:50%;

top:50%;

margin-left:-宽度的一半;

margin-top:-高度的一半；

二、使用css3新属性translate，这个不需要固定宽高。

position:absolute;

left:50%;

top:50%;

transform:translate(-50% -50%);

三、使用flex布局，这个也不需要固定宽高。但是需要在父容器上面设置

display:flex;

justify-content:center;

align-items:center;

四：将上下左右全设为0.

position:absolute;

top:0;

bottom:0;

left:0;

right:0;

margin:auto;

这样全部设为0后会拉伸图片充满父容器，然后margin设为auto会自动填充上外边距，就能实现居中。

如何将固定宽度的 div 居中对齐，它是父 div 内 3 个 div 中的中间 div？

【中文标题】如何将固定宽度的 div 居中对齐，它是父 div 内 3 个 div 中的中间 div？

【英文标题】：How do I centre align div of fixed width which is middle div among 3 divs within parent div?

【发布时间】：2021-11-04 11:25:37

【问题描述】：

这是我的 HTML（实际上是 JSX）：

domain-input-parent 类的中间 div 应具有固定宽度 400px 并应保持在屏幕中心，水平

这样domain-label 和icon-container 的宽度将相等。

而且这种定位应该适用于any 屏幕宽度（>400px）

如何做到这一点？

以下是完整的 HTML：

  <div className="domain-container">
    <div className="domain-label">
      <p>Domain</p>
    </div>
    <div className="domain-input-parent">
      <input className="domain-input" id="website-url" placeholder="    https://www.yourwebsite.com" onInput=validateDomain onClick=validateDomain></input>
      <p id="error-text" className= (hideErrorText == true) ? "hidden invalid-input" : "invalid-input">Please enter a valid domain ex. www.example.com</p>
    </div>
    <div className="icon-container">
      <img className="info-icon" src="images/info_icon.png"></img>
      <span className="tooltip-text">This is the top level website for seo radar to monitor.  We will validate the domain and will fetch the robots.txt file associated with it.  Examples: www.example.com or example.com.</span>
    </div>
  </div>

如果需要任何其他信息，请告诉我。

【问题讨论】：

希望您至少尝试自己编写代码。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。

您的问题应该包括您现有的 CSS。

@BSMP 是的，对。主要部分丢失了

【参考方案1】：

input 和 img 没有结束标签。 className 是一个 JS 构造。使用弹性

.domain-container
display:flex;



.y width:400px

.x 
width: calc((100% - 400px) / 2);


divborder:solid 1px black;

<div class="domain-container">
  <div class="domain-label x">
    <p>Domaina</p>
  </div>
  <div class="domain-input-parent y">
    <input className="domain-input" id="website-url" placeholder="    https://www.yourwebsite.com" onInput=validateDomain onClick=validateDomain>
    <p id="error-text" className= (hideErrorText==t rue) ? "hidden invalid-input" : "invalid-input">Please enter a valid domain ex. www.example.com</p>
  </div>
  <div class="icon-container x">
    <img class="info-icon" src="images/info_icon.png">
    <span class="tooltip-text">This is the top level website for seo radar to monitor.  We will validate the domain and will fetch the robots.txt file associated with it.  Examples: www.example.com or example.com.</span>
  </div>
</div>