Div居中在屏幕正中间

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Div居中在屏幕正中间相关的知识,希望对你有一定的参考价值。

参考技术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-labelicon-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>

【讨论】:

以上是关于Div居中在屏幕正中间的主要内容,如果未能解决你的问题,请参考以下文章

如何在css设置div在屏幕中央

hmtl div水平垂直居中

html中怎么让div层固定在屏幕中央右边500像素的位置

div+css如何控制图片在电脑屏幕上的比例及位置

将 div 居中到网页的中间?

在另一个 div 的中间垂直居中 div